Styling

web/README.md

@@ -1,34 +1,5 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# forget me not site
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Using
+- nextjs
+- tailwindcss

web/components/header.js

@@ -2,15 +2,17 @@ import Link from "next/link";
 
 function Header({ user, loading }) {
   return (
-    <header>
-      <nav>
-        <ul>
-          <li>
+    <header className="container mx-auto flex justify-center flex-col">
+      <h1 className="text-4xl mx-auto">forget me not</h1>
+
+      <nav className="mx-auto mt-2">
+        <ul className="flex justify-center flex-row">
+          <li className="mx-3">
             <Link href="/">
               <a>Home</a>
             </Link>
           </li>
-          <li>
+          <li className="mx-3">
             <Link href="/about">
               <a>About</a>
             </Link>
@@ -18,22 +20,22 @@ function Header({ user, loading }) {
           {!loading &&
             (user ? (
               <>
-                <li>
+                <li className="mx-3">
                   <Link href="/profile">
                     <a>Client-rendered profile</a>
                   </Link>
                 </li>
-                <li>
+                <li className="mx-3">
                   <Link href="/advanced/ssr-profile">
                     <a>Server rendered profile (advanced)</a>
                   </Link>
                 </li>
-                <li>
+                <li className="mx-3">
                   <a href="/api/v1/logout">Logout</a>
                 </li>
               </>
             ) : (
-              <li>
+              <li className="mx-3">
                 <a href="/api/v1/login">Login</a>
               </li>
             ))}

web/components/layout.js

@@ -11,13 +11,8 @@ function Layout({ user, loading = false, children }) {
       <Header user={user} loading={loading} />
 
       <main>
-        <div className="container">{children}</div>
+        <div className="container mx-auto">{children}</div>
       </main>
-
-      <style jsx>{`
-      `}</style>
-      <style jsx global>{`
-      `}</style>
     </>
   );
 }

web/components/wanttobutton.js

@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+function WantToButton({ href, text }) {
+  return (
+    <Link href={href}>
+      <a className="py-1 px-2 mr-1 rounded border text-xl">{text}</a>
+    </Link>
+  );
+}
+
+export default WantToButton;

web/pages/index.js

@@ -1,4 +1,6 @@
 import Layout from "../components/layout";
+import WantToButton from "../components/wanttobutton";
+import Link from "next/link";
 import { useFetchUser } from "../lib/user";
 
 function Home() {
@@ -6,19 +8,20 @@ function Home() {
 
   return (
     <Layout user={user} loading={loading}>
-      <h1 className="text-3xl font-bold underline">Hello world!</h1>
-
       {loading && <p>Loading login info...</p>}
 
       {!loading && !user && (
         <>
-          <p>
-            To test the login click in <i>Login</i>
-          </p>
-          <p>
-            Once you have logged in you should be able to click in{" "}
-            <i>Profile</i> and <i>Logout</i>
-          </p>
+          <div className="flex flex-col justify-center">
+            <p className="text-lg">I want to...</p>
+            <div className="flex flex-row mt-2">
+              <WantToButton href="/api/v1/login" text="login" />
+              <WantToButton
+                href="/api/v1/login"
+                text="stay anonymous"
+              />
+            </div>
+          </div>
         </>
       )}