added spinner to signin button

Reviewed-on: #5

README.md

@@ -1,36 +1,15 @@
-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).
+This project is scaffolded with the following:
 
-## Getting Started
+- Next.js
+- Auth.js (nextauth)
+- Nextui
+- Next-themes
+- Tailwind
+- Drizzle
+- Postgres
 
-First, run the development server:
+It is deployed to vercel and can be viewed on the following links:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+[Preview branches](https://titles-chrqr-christian-rannes-projects.vercel.app/)
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## 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.
+[Production](https://titles-psi.vercel.app/)

app/globals.css

@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

app/page.tsx

@@ -8,8 +8,8 @@ export default async function Home() {
   const users = await getUsers();
   const session: Session | null = await auth();
   return (
-    <main>
-      <div className="w-full h-full flex flex-col items-center">
+    <main className="min-h-screen w-full">
+      <div className="min-h-screen w-full flex flex-col items-center justify-center">
         <SignIn session={session} />
         <ThemeSwitcher />
       </div>

components/SignIn.tsx

@@ -1,32 +1,48 @@
 "use client";
 
 import { signIn, signOut } from "next-auth/react";
-import { SyntheticEvent } from "react";
+import { SyntheticEvent, useState } from "react";
 import { Session } from "next-auth";
 import { Button } from "@nextui-org/button";
+import { Spinner } from "@nextui-org/react";
 
 interface SignInProps {
   session: Session | null;
 }
 
 export default function SignIn({ session }: SignInProps) {
+  const [loading, setLoading] = useState(false);
   const handleSignIn = async (event: SyntheticEvent) => {
     event.preventDefault();
+    setLoading(true);
     await signIn("github");
   };
 
   const handleSignOut = async (event: SyntheticEvent) => {
     event.preventDefault();
+    setLoading(true);
     await signOut();
   };
 
-  return session?.user ? (
-    <form onSubmit={handleSignOut}>
-      <Button type="submit">Sign out</Button>
-    </form>
-  ) : (
-    <form onSubmit={handleSignIn}>
-      <Button type="submit">Sign in</Button>
-    </form>
+  return (
+    <>
+      {session?.user ? (
+        <form onSubmit={handleSignOut}>
+          <Button type="submit" disabled={loading}>
+            Sign out
+          </Button>
+        </form>
+      ) : (
+        <form onSubmit={handleSignIn}>
+          {!loading ? (
+            <Button type="submit" disabled={loading}>
+              Sign in
+            </Button>
+          ) : (
+            <Spinner color="success" />
+          )}
+        </form>
+      )}
+    </>
   );
 }

components/ThemeSwitcher.tsx

@@ -16,7 +16,7 @@ export function ThemeSwitcher() {
   if (!mounted) return null;
 
   return (
-    <div>
+    <div className="flex gap-2 items-center my-2">
       The current theme is: {theme}
       <Button onClick={() => setTheme("light")}>Light Mode</Button>
       <Button onClick={() => setTheme("dark")}>Dark Mode</Button>