feat: Added NextAuth

- Added NextAuth using `GoogleProvider`
- Added auth modals for better interactivity
- Added Tanstack React Query Providers
- Added Navabar, Homepage, user navigation menu

app/(auth)/login/page.tsx

@@ -0,0 +1,52 @@
+import { Icons } from "@/components/Icons";
+import { buttonVariants } from "@/components/ui/button";
+import UserAuthentication from "@/components/UserAuthentication";
+import { cn } from "@/lib/utils";
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function Login() {
+  return (
+    <div className="absolute inset-0">
+      <div className="h-full max-w-2xl mx-auto flex flex-col items-center justify-center gap-20">
+        <Link
+          href="/"
+          className={cn(
+            buttonVariants({ variant: "ghost" }),
+            "self-start -mt-20"
+          )}
+        >
+          <ChevronLeft className="mr-2 h-4 w-4" />
+          Home
+        </Link>
+
+        <SignIn />
+      </div>
+    </div>
+  );
+}
+
+export const SignIn = () => {
+  return (
+    <div className="container mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <Icons.logo className="mx-auto h-24 w-24" />
+        <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+        <p className="text-sm max-w-xs mx-auto">
+          By continuing, you are setting up a Crypt anonyumous account and agree
+          to our User Agreement and Privacy Policy.
+        </p>
+      </div>
+      <UserAuthentication />
+      <p className="px-8 text-center text-sm text-muted-foreground">
+        New to Crypt?{" "}
+        <Link
+          href="/register"
+          className="hover:text-brand text-sm underline underline-offset-4"
+        >
+          Sign Up
+        </Link>
+      </p>
+    </div>
+  );
+};

app/(auth)/register/page.tsx

@@ -0,0 +1,51 @@
+import { Icons } from "@/components/Icons";
+import { buttonVariants } from "@/components/ui/button";
+import UserAuthentication from "@/components/UserAuthentication";
+import { cn } from "@/lib/utils";
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function Register() {
+  return (
+    <div className="absolute inset-0">
+      <div className="h-full max-w-2xl mx-auto flex flex-col items-center justify-center gap-20">
+        <Link
+          href="/"
+          className={cn(
+            buttonVariants({ variant: "ghost" }),
+            "self-start -mt-20"
+          )}
+        >
+          <ChevronLeft className="mr-2 h-4 w-4" />
+          Home
+        </Link>
+
+        <SignUp />
+      </div>
+    </div>
+  );
+}
+export const SignUp = () => {
+  return (
+    <div className="container mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[400px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <Icons.logo className="mx-auto h-24 w-24" />
+        <h1 className="text-2xl font-semibold tracking-tight">Create your Account</h1>
+        <p className="text-sm max-w-xs mx-auto">
+          By continuing, you are setting up a Crypt anonymous account and agree to our
+          User Agreement and Privacy Policy.
+        </p>
+      </div>
+      <UserAuthentication />
+      <p className="px-8 text-center text-sm text-muted-foreground">
+        Already a Crypt User?{" "}
+        <Link
+          href="/login"
+          className="hover:text-brand text-sm underline underline-offset-4"
+        >
+          Login
+        </Link>
+      </p>
+    </div>
+  );
+};

app/@authModal/(.)login/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { SignIn } from "@/app/(auth)/login/page";
+import CloseModal from "@/components/CloseModal";
+import { useRouter } from "next/navigation";
+
+export default function Page() {
+  const router = useRouter();
+
+  const handleClose = () => {
+    router.back();
+  };
+
+  const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      handleClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-zinc-900/20 z-10"
+      onClick={handleOutsideClick}
+    >
+      <div className="container flex items-center h-full max-w-lg mx-auto">
+        <div className="relative bg-white w-full h-fit py-3 rounded-lg">
+          <div className="absolute top-4 right-4" onClick={handleOutsideClick}>
+            <CloseModal onClick={handleClose} />
+          </div>
+          <SignIn />
+        </div>
+      </div>
+    </div>
+  );
+}

app/@authModal/(.)register/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { SignUp } from "@/app/(auth)/register/page";
+import CloseModal from "@/components/CloseModal";
+import { useRouter } from "next/navigation";
+
+export default function Page() {
+  const router = useRouter();
+
+  const handleClose = () => {
+    router.back();
+  };
+
+  const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      handleClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-zinc-900/20 z-10"
+      onClick={handleOutsideClick}
+    >
+      <div className="container flex items-center h-full max-w-lg mx-auto">
+        <div className="relative bg-white w-full h-fit py-3 rounded-lg">
+          <div className="absolute top-4 right-4">
+            <CloseModal onClick={handleClose} />
+          </div>
+          <SignUp />
+        </div>
+      </div>
+    </div>
+  );
+}

app/@authModal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import { authOptions } from "@/lib/auth";
+import NextAuth from "next-auth/next";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

app/editor.css

@@ -0,0 +1,65 @@
+.dark .ce-block--selected .ce-block__content,
+.dark .ce-inline-toolbar,
+.dark .codex-editor--narrow .ce-toolbox,
+.dark .ce-conversion-toolbar,
+.dark .ce-settings,
+.dark .ce-settings__button,
+.dark .ce-toolbar__settings-btn,
+.dark .cdx-button,
+.dark .ce-popover,
+.dark .ce-toolbar__plus:hover {
+  background: theme('colors.popover.DEFAULT');
+  color: inherit;
+  border-color: theme('colors.border');
+}
+
+.dark .ce-inline-tool,
+.dark .ce-conversion-toolbar__label,
+.dark .ce-toolbox__button,
+.dark .cdx-settings-button,
+.dark .ce-toolbar__plus {
+  color: inherit;
+}
+
+.dark .ce-popover__item-icon,
+.dark .ce-conversion-tool__icon {
+  background-color: theme('colors.muted.DEFAULT');
+  box-shadow: none;
+}
+
+.dark .cdx-search-field {
+  border-color: theme('colors.border');
+  background: theme('colors.input');
+  color: inherit;
+}
+
+.dark ::selection {
+  background: theme('colors.accent.DEFAULT');
+}
+
+.dark .cdx-settings-button:hover,
+.dark .ce-settings__button:hover,
+.dark .ce-toolbox__button--active,
+.dark .ce-toolbox__button:hover,
+.dark .cdx-button:hover,
+.dark .ce-inline-toolbar__dropdown:hover,
+.dark .ce-inline-tool:hover,
+.dark .ce-popover__item:hover,
+.dark .ce-conversion-tool:hover,
+.dark .ce-toolbar__settings-btn:hover {
+  background-color: theme('colors.accent.DEFAULT');
+  color: theme('colors.accent.foreground');
+}
+
+.dark .cdx-notify--error {
+  background: theme('colors.destructive.DEFAULT') !important;
+}
+
+.dark .cdx-notify__cross::after,
+.dark .cdx-notify__cross::before {
+  background: white;
+}
+
+.codex-editor__redactor {
+  padding-bottom: 0 !important;
+}

app/layout.tsx

@@ -1,22 +1,47 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { cn } from "@/lib/utils";
+import { Navbar } from "@/components/pages/Navbar";
+import { Toaster } from "@/components/ui/toaster";
+import Providers from "@/components/Providers";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], display: "swap" });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Crypt",
+  description:
+    "Crypt offers students a confidential space to discuss academics, share insights, and connect with a supportive community anonymously.",
 };
 
 export default function RootLayout({
   children,
+  authModal,
 }: Readonly<{
   children: React.ReactNode;
+  authModal: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html
+      lang="en"
+      className={cn(
+        "bg-white text-slate-900 antialiased light",
+        inter.className
+      )}
+    >
+      <body className={cn("min-h-screen antialiased", inter.className)}>
+        <Providers>
+          <Navbar />
+
+          {authModal}
+
+          <div className="container max-w-7xl mx-auto h-full pt-1">
+            {children}
+          </div>
+
+          <Toaster />
+        </Providers>
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -5,11 +5,6 @@ export default function Home() {
     <main>
 
       <Homepage />
-      {/* <DotPattern
-        className={cn(
-          "[mask-image:linear-gradient(to_bottom_left,white,transparent,transparent)] ",
-        )}
-      /> */}
     </main>
   );
 }

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/CloseModal.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { X } from "lucide-react";
+import { Button } from "./ui/button";
+
+interface CloseModalProps {
+  onClick: () => void;
+}
+
+export default function CloseModal({ onClick }: CloseModalProps): JSX.Element {
+  return (
+    <Button
+      variant="secondary"
+      className="h-8 w-8 p-0 rounded-md"
+      onClick={onClick}
+      aria-label="Close modal"
+    >
+      <X className="h-4 w-4" />
+    </Button>
+  );
+}