Auth Card Block

1import { ArrowRight, LockKeyhole } from "lucide-react";
2 
3import { Button } from "@/components/ui/atoms/button";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardFooter,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/atoms/card";
12import { Input } from "@/components/ui/atoms/input";
13import { Label } from "@/components/ui/atoms/label";
14 
15function AuthCardBlock() {
16  return (
17    <section
18      data-slot="auth-card-block"
19      className="@container/auth flex min-h-[32rem] items-center justify-center bg-surface-subtle p-3 @sm/auth:p-6"
20    >
21      <Card variant="glass" className="w-full max-w-md">
22        <CardHeader className="grid-cols-1 text-center">
23          <span className="mx-auto mb-2 flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
24            <LockKeyhole className="size-4" />
25          </span>
26          <CardTitle>Welcome back</CardTitle>
27          <CardDescription>Use your work account to continue.</CardDescription>
28        </CardHeader>
29        <CardContent>
30          <form className="space-y-4">
31            <div className="space-y-1.5">
32              <Label htmlFor="phase8-email">Email</Label>
33              <Input
34                id="phase8-email"
35                type="email"
36                autoComplete="email"
37                placeholder="name@company.com"
38              />
39            </div>
40            <div className="space-y-1.5">
41              <Label htmlFor="phase8-password">Password</Label>
42              <Input id="phase8-password" type="password" autoComplete="current-password" />
43            </div>
44            <Button type="submit" className="w-full">
45              Sign in <ArrowRight className="size-4" />
46            </Button>
47          </form>
48        </CardContent>
49        <CardFooter className="justify-center text-xs text-muted-foreground">
50          Need access?{" "}
51          <a href="#" className="font-medium text-primary hover:underline">
52            Contact your administrator
53          </a>
54        </CardFooter>
55      </Card>
56    </section>
57  );
58}
59 
60export { AuthCardBlock };