feat: set up tailwind

supabase-community · Mar 24, 2022 · 27ccbe7 · 27ccbe7
1 parent a24f0b5
commit 27ccbe7
Show file tree

Hide file tree

Showing 10 changed files with 326 additions and 105 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,7 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "GraphQL.vscode-graphql"]
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "GraphQL.vscode-graphql",
+    "bradlc.vscode-tailwindcss"
+  ]
 }
diff --git a/app/lib/navigation.tsx b/app/lib/navigation.tsx
@@ -5,16 +5,68 @@ import React from "react";
 export function Navigation() {
   const user = Auth.useUser();
   return (
-    <div>
-      SupaNews{" "}
-      {user.user === null ? (
-        <Link href="/login">login</Link>
-      ) : (
-        <>
-          <Link href="/account">account</Link>
-          <Link href="/logout">logout</Link>
-        </>
-      )}
-    </div>
+    <header className="text-gray-600 body-font">
+      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+        <Link href="/">
+          <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+            </svg>
+            <span className="ml-3 text-xl">SupaNews</span>
+          </a>
+        </Link>
+        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
+          <Link href="/new">
+            <a className="mr-5 hover:text-gray-900">new</a>
+          </Link>
+          <Link href="/comments">
+            <a className="mr-5 hover:text-gray-900">comments</a>
+          </Link>
+          <Link href="/submit">
+            <a className="mr-5 hover:text-gray-900">submit</a>
+          </Link>
+        </nav>
+        {user.user === null ? (
+          <Link href="login">
+            <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
+              login
+              <svg
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                className="w-4 h-4 ml-1"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7"></path>
+              </svg>
+            </button>
+          </Link>
+        ) : (
+          <>
+            <Link href="/account">
+              <a className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
+                account
+              </a>
+            </Link>
+            <Link href="/logout">
+              <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
+                logout
+              </button>
+            </Link>
+          </>
+        )}
+      </div>
+    </header>
   );
 }
diff --git a/app/package.json b/app/package.json
@@ -11,10 +11,13 @@
   "dependencies": {
     "@supabase/supabase-js": "1.31.2",
     "@supabase/ui": "0.36.4",
+    "autoprefixer": "10.4.4",
     "graphql": "16.3.0",
     "next": "12.1.0",
+    "postcss": "8.4.12",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "tailwindcss": "3.0.23",
     "urql": "2.2.0"
   },
   "devDependencies": {

diff --git a/app/pages/account.tsx b/app/pages/account.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { Auth, Loading } from "@supabase/ui";
+import { Auth, Button } from "@supabase/ui";
+import { CombinedError, useMutation, useQuery } from "urql";
+import { Input } from "@supabase/ui";
 import { useSupabaseClient } from "../lib/supabase";
 import { DocumentType, gql } from "../gql";
-import { CombinedError, useMutation, useQuery } from "urql";
 
 const UserProfileQuery = gql(/* GraphQL */ `
   query UserProfileQuery($profileId: UUID!) {
@@ -100,55 +101,45 @@ function AccountForm(props: { profile: DocumentType<typeof ProfileFragment> }) {
   const errorState = extractExpectedGraphQLErrors(updateProfileMutation.error);
 
   return (
-    <>
-      <div className="form-widget">
-        <div>
-          <label htmlFor="username">Name</label>
-          <input
-            id="username"
-            type="text"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </div>
-        <div>
-          <label htmlFor="website">Website</label>
-          <input
-            id="website"
-            type="website"
-            value={website || ""}
-            onChange={(e) => setWebsite(e.target.value)}
-          />
-        </div>
-
-        <div>
-          <button
-            className="button block primary"
-            onClick={() =>
-              updateProfile({
-                userId: props.profile.id,
-                newUsername: username,
-                newWebsite: website,
-              })
-            }
-            disabled={updateProfileMutation.fetching}
-          >
-            {updateProfileMutation.fetching ? "Loading ..." : "Update"}
-          </button>
-        </div>
-
-        <div>{errorState}</div>
-
-        <div>
-          <button
-            className="button block"
-            onClick={() => supabaseClient.auth.signOut()}
-          >
-            Sign Out
-          </button>
-        </div>
+    <section className="container px-5 py-24 mx-auto">
+      <div>
+        <label htmlFor="username" className="text-blue-600">
+          Name
+        </label>
+        <Input
+          id="username"
+          type="text"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="website">Website</label>
+        <Input
+          id="website"
+          type="website"
+          value={website || ""}
+          onChange={(e) => setWebsite(e.target.value)}
+        />
       </div>
-    </>
+
+      <div>
+        <Button
+          onClick={() =>
+            updateProfile({
+              userId: props.profile.id,
+              newUsername: username,
+              newWebsite: website,
+            })
+          }
+          disabled={updateProfileMutation.fetching}
+        >
+          {updateProfileMutation.fetching ? "Loading ..." : "Update"}
+        </Button>
+      </div>
+
+      <div>{errorState}</div>
+    </section>
   );
 }
 

diff --git a/app/pages/index.tsx b/app/pages/index.tsx
@@ -40,7 +40,8 @@ const FeedQuery = gql(/* GraphQL */ `
 `);
 
 const Home: NextPage = () => {
-  const [data] = useQuery({ query: FeedQuery });
+  const [feedQuery] = useQuery({ query: FeedQuery });
+
   return (
     <div className={styles.container}>
       <Head>
@@ -51,7 +52,7 @@ const Home: NextPage = () => {
 
       <main className={styles.main}>
         <pre>
-          <code>{JSON.stringify(data?.data, null, 2)}</code>
+          <code>{JSON.stringify(feedQuery?.data, null, 2)}</code>
         </pre>
       </main>
 

diff --git a/app/pages/login.tsx b/app/pages/login.tsx
@@ -2,25 +2,24 @@ import React from "react";
 import type { NextPage } from "next";
 import { Auth } from "@supabase/ui";
 import { useSupabaseClient } from "../lib/supabase";
+import { useRouter } from "next/router";
 
 const LogIn: NextPage = () => {
   const { user } = Auth.useUser();
   const supabaseClient = useSupabaseClient();
+  const router = useRouter();
 
-  return user ? (
-    <pre>
-      <code>{JSON.stringify(user, null, 2)}</code>
-      <button
-        onClick={() => {
-          supabaseClient.auth.signOut();
-        }}
-      >
-        Log out
-      </button>
-    </pre>
-  ) : (
-    <Auth supabaseClient={supabaseClient} providers={["github"]} />
-  );
+  React.useEffect(() => {
+    if (user !== null) {
+      router.replace("/account");
+    }
+  }, []);
+
+  if (user) {
+    return null;
+  }
+
+  return <Auth supabaseClient={supabaseClient} providers={["github"]} />;
 };
 
 export default LogIn;
diff --git a/app/postcss.config.js b/app/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -1,16 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./lib/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};