add shad

src/app/auth/login/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+
+const formSchema = z.object({
+    email: z.string().email({ message: "Invalid email address" }),
+    password: z
+        .string()
+        .min(8, { message: "Password must be at least 8 characters" }),
+});
+
+export default function LoginForm() {
+    const [error, setError] = useState<string | null>(null);
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: "",
+            password: "",
+        },
+    });
+
+    function onSubmit(values: z.infer<typeof formSchema>) {
+        console.log(values);
+        setError("Invalid email or password. Please try again.");
+    }
+
+    return (
+        <Card className="w-full max-w-md mx-auto">
+            <CardHeader>
+                <CardTitle>Login</CardTitle>
+                <CardDescription>
+                    Enter your credentials to access your dashboard
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <Form {...form}>
+                    <form
+                        onSubmit={form.handleSubmit(onSubmit)}
+                        className="space-y-4"
+                    >
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Email</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder="Enter your email"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Password</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="password"
+                                            placeholder="Enter your password"
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        {error && (
+                            <Alert variant="destructive">
+                                <ExclamationTriangleIcon className="h-4 w-4" />
+                                <AlertDescription>{error}</AlertDescription>
+                            </Alert>
+                        )}
+                        <Button type="submit" className="w-full">
+                            Login
+                        </Button>
+                    </form>
+                </Form>
+            </CardContent>
+            <CardFooter className="flex justify-center">
+                <Button variant="link">Forgot password?</Button>
+            </CardFooter>
+        </Card>
+    );
+}

src/app/globals.css

@@ -1,3 +1,57 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer base {
+    :root {
+        --background: 30 21% 95%;
+        --foreground: 30 5% 10%;
+        --card: 30 21% 90%;
+        --card-foreground: 30 5% 15%;
+        --popover: 30 21% 95%;
+        --popover-foreground: 30 95% 10%;
+        --primary: 30 22% 47%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 30 21% 72%;
+        --secondary-foreground: 0 0% 0%;
+        --muted: -8 21% 85%;
+        --muted-foreground: 30 5% 40%;
+        --accent: -8 21% 80%;
+        --accent-foreground: 30 5% 15%;
+        --destructive: 0 50% 50%;
+        --destructive-foreground: 30 5% 90%;
+        --border: 30 21% 72%;
+        --input: 30 21% 50%;
+        --ring: 30 22% 47%;
+        --radius: 0rem;
+    }
+    .dark {
+        --background: 30 21% 10%;
+        --foreground: 30 5% 90%;
+        --card: 30 21% 10%;
+        --card-foreground: 30 5% 90%;
+        --popover: 30 21% 5%;
+        --popover-foreground: 30 5% 90%;
+        --primary: 30 22% 47%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 30 21% 20%;
+        --secondary-foreground: 0 0% 100%;
+        --muted: -8 21% 25%;
+        --muted-foreground: 30 5% 65%;
+        --accent: -8 21% 25%;
+        --accent-foreground: 30 5% 90%;
+        --destructive: 0 50% 50%;
+        --destructive-foreground: 30 5% 90%;
+        --border: 30 21% 50%;
+        --input: 30 21% 50%;
+        --ring: 30 22% 47%;
+        --radius: 0rem;
+    }
+}
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}