Update react example to match example on supabase website (#150)

examples/react/package.json

@@ -4,8 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build:example": "tsc && vite build",
+    "dev": "concurrently \"npm run dev:css\" \"vite\"",
+    "dev:css": "tailwindcss -w -i ./src/tailwind.css -o src/app.css",
+    "build:example": "npm run build:css && tsc && vite build",
+    "build:css": "tailwindcss -m -i ./src/tailwind.css -o src/app.css",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -18,11 +20,13 @@
   "devDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.11.9",
-    "@mui/material": "^5.11.9",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.13",
+    "concurrently": "^7.6.0",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   }

examples/react/src/App.module.css

@@ -1,111 +1,23 @@
-.App {
-  text-align: center;
-}
-
-.logo {
-  animation: logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
 .container-redshadow {
   min-width: 300px;
   box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
-  -webkit-box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
-  -moz-box-shadow: -2px 1px 69px 5px rgb(202, 37, 37);
-  padding: 2rem;
   border-radius: 1rem;
 }
 
 .container-greenshadow {
   min-width: 300px;
   box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
-  -webkit-box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
-  -moz-box-shadow: -2px 1px 69px 5px rgb(65, 163, 35);
-  padding: 2rem;
   border-radius: 1rem;
 }
 
 .container-blueshadow {
   min-width: 300px;
   box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
-  -webkit-box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
-  -moz-box-shadow: -2px 1px 69px 5px rgb(8, 107, 177);
-  padding: 2rem;
   border-radius: 1rem;
 }
 
 .container-orangeshadow {
   min-width: 300px;
   box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
-  -webkit-box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
-  -moz-box-shadow: -2px 1px 69px 5px rgb(235, 115, 29);
-  padding: 2rem;
   border-radius: 1rem;
 }
-
-.auth-container {
-  width: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.selectors-container {
-  width: 50%;
-  padding: 2rem;
-}
-
-.solidrow {
-  display: flex;
-  align-items: center;
-}
-
-.toggles-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.header {
-  min-height: 100vh;
-  max-width: 1200px;
-  margin-inline: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.link {
-  color: #b318f0;
-}
-
-@media (max-width: 600px) {
-  .header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    font-size: calc(10px + 2vmin);
-    color: white;
-  }
-
-  .container {
-    min-width: 250px;
-  }
-
-  .selectors-container {
-    width: fit-content;
-    max-width: 80vw;
-    margin-inline: auto;
-  }
-
-  .auth-container {
-    width: fit-content;
-  }
-}