Add: Auth pages, SpinLoader comp, Sheet for Cart and Mobile drawing.

Refactor: Refactored PageHeader to support more pages outside admin.

package.json

@@ -11,6 +11,7 @@
    },
    "dependencies": {
       "@prisma/client": "^5.18.0",
+      "@radix-ui/react-dialog": "^1.1.2",
       "@radix-ui/react-dropdown-menu": "^2.1.1",
       "@radix-ui/react-label": "^2.1.0",
       "@radix-ui/react-slot": "^1.1.0",
@@ -30,7 +31,8 @@
       "stripe": "^16.8.0",
       "tailwind-merge": "^2.5.2",
       "tailwindcss-animate": "^1.0.7",
-      "zod": "^3.23.8"
+      "zod": "^3.23.8",
+      "zustand": "^5.0.0"
    },
    "devDependencies": {
       "@types/node": "^20",

src/app/(auth)/sign-in/_components/SignInForm.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useFormState, useFormStatus } from "react-dom";
+import Image from "next/image";
+import SpinLoader from "@/components/SpinLoader";
+
+export function SignInForm() {
+   //const [error, action] = useFormState(null, {});
+
+   return (
+      <form
+         className="space-y-8 max-w-xl mx-auto"
+         //action={action}
+      >
+         <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input type="email" id="email" name="email" required />
+            {/* {error.email && <div className="text-destructive">{error.email}</div>} */}
+         </div>
+         <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input type="password" id="password" name="password" required />
+            {/* {error.email && <div className="text-destructive">{error.email}</div>} */}
+         </div>
+         <SubmitButton />
+      </form>
+   );
+}
+
+function SubmitButton() {
+   const { pending } = useFormStatus();
+   return (
+      <Button type="submit" disabled={pending}>
+         {pending ? <SpinLoader>Please wait..</SpinLoader> : "Sign in"}
+      </Button>
+   );
+}

src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,25 @@
+import { PageHeader } from "@/components/PageHeader";
+import { SignInForm } from "./_components/SignInForm";
+import Link from "next/link";
+
+export default function SignIn() {
+   return (
+      <div className="mt-20 border p-2">
+         <PageHeader className="text-center">Sign in</PageHeader>
+         <p className="text-center">
+            New to the platform?{" "}
+            <Link href="/sign-up" className="text-blue-700 hover:underline">
+               Create a new account
+            </Link>
+         </p>
+         <SignInForm />
+
+         <p className="text-center mt-10">
+            Or{" "}
+            <Link href="/" className="text-blue-700 hover:underline">
+               continue browsing
+            </Link>
+         </p>
+      </div>
+   );
+}

src/app/(auth)/sign-up/_components/SignUpForm.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useFormState, useFormStatus } from "react-dom";
+import Image from "next/image";
+import SpinLoader from "@/components/SpinLoader";
+
+export function SignUpForm() {
+   //const [error, action] = useFormState(null, {});
+
+   return (
+      <form
+         className="space-y-8 max-w-xl mx-auto"
+         //action={action}
+      >
+         <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input type="email" id="email" name="email" required />
+            {/* {error.email && <div className="text-destructive">{error.email}</div>} */}
+         </div>
+         <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input type="password" id="password" name="password" required />
+            {/* {error.email && <div className="text-destructive">{error.email}</div>} */}
+         </div>
+         <SubmitButton />
+      </form>
+   );
+}
+
+function SubmitButton() {
+   const { pending } = useFormStatus();
+   return (
+      <Button type="submit" disabled={pending}>
+         {pending ? <SpinLoader>Please wait..</SpinLoader> : "Sign up"}
+      </Button>
+   );
+}

src/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,25 @@
+import { PageHeader } from "@/components/PageHeader";
+import { SignUpForm } from "./_components/SignUpForm";
+import Link from "next/link";
+
+export default function SignUp() {
+   return (
+      <div className="mt-20 border p-2">
+         <PageHeader className="text-center">Sign up</PageHeader>
+         <p className="text-center">
+            Have an account already?{" "}
+            <Link href="/sign-in" className="text-blue-700 hover:underline">
+               Login
+            </Link>
+         </p>
+         <SignUpForm />
+
+         <p className="text-center mt-10">
+            Or{" "}
+            <Link href="/" className="text-blue-700 hover:underline">
+               continue browsing
+            </Link>
+         </p>
+      </div>
+   );
+}