Authentication

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
5import { Checkbox } from "@/components/ui/checkbox";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8import { Separator } from "@/components/ui/separator";
9 
10export function AuthenticationBlock() {
11  return (
12    <div className="flex items-center justify-center min-h-screen p-6">
13      <Card className="w-full max-w-md text-foreground">
14        <CardHeader className="space-y-1">
15          <CardTitle className="text-2xl text-foreground">Welcome back</CardTitle>
16          <CardDescription className="text-muted-foreground">Enter your credentials to sign in to your account</CardDescription>
17        </CardHeader>
18        <CardContent className="space-y-4">
19          <div className="space-y-2">
20            <Label htmlFor="email" className="text-foreground">
21              Email
22            </Label>
23            <Input id="email" type="email" placeholder="name@example.com" className="text-foreground placeholder:text-muted-foreground" />
24          </div>
25          <div className="space-y-2">
26            <Label htmlFor="password" className="text-foreground">
27              Password
28            </Label>
29            <Input id="password" type="password" className="text-foreground placeholder:text-muted-foreground" />
30          </div>
31          <div className="flex items-center justify-between">
32            <div className="flex items-center gap-2">
33              <Checkbox id="remember" />
34              <Label htmlFor="remember" className="text-foreground text-sm cursor-pointer">
35                Remember me
36              </Label>
37            </div>
38            <Button variant="link" className="text-muted-foreground text-sm p-0">
39              Forgot password?
40            </Button>
41          </div>
42          <Button className="w-full text-foreground">Sign In</Button>
43          <div className="relative">
44            <div className="absolute inset-0 flex items-center">
45              <Separator />
46            </div>
47            <div className="relative flex justify-center text-xs uppercase">
48              <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
49            </div>
50          </div>
51          <div className="grid grid-cols-2 gap-4">
52            <Button variant="outline" className="text-foreground">
53              GitHub
54// … truncated