add login card and shadcn components

taskncoffee-app/src/pages/Login.jsx

@@ -0,0 +1,63 @@
+import { Button } from "@/components/ui/button"
+import {
+    Card,
+    CardAction,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export function LoginPage({ className }) {
+    return (
+        <div className={className}>
+            <Card className="w-full max-w-sm">
+                <CardHeader>
+                    <CardTitle>Login to your account</CardTitle>
+                    <CardDescription>
+                        Enter your username below to login to your account
+                    </CardDescription>
+                    <CardAction>
+                        <Button variant="link">Sign Up</Button>
+                    </CardAction>
+                </CardHeader>
+                <CardContent>
+                    <form>
+                        <div className="flex flex-col gap-6">
+                            <div className="grid gap-2">
+                                <Label htmlFor="username">Username</Label>
+                                <Input
+                                    id="username"
+                                    type="username"
+                                    placeholder="username"
+                                    required
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <div className="flex items-center">
+                                    <Label htmlFor="password">Password</Label>
+                                    <a
+                                        href="#"
+                                        className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                                    >
+                                        Forgot your password?
+                                    </a>
+                                </div>
+                                <Input id="password" type="password" required />
+                            </div>
+                        </div>
+                    </form>
+                </CardContent>
+                <CardFooter className="flex-col gap-2">
+                    <Button type="submit" className="w-full">
+                        Login
+                    </Button>
+
+                </CardFooter>
+            </Card>
+        </div>
+    )
+}