Card Login (Tailwind)

1"use client";
2import { Check } from "lucide-react";
3import { cn } from "@/lib/utils";
4import { Badge } from "@/registry/brook/tailwind/ui/badge";
5import { Button } from "@/registry/brook/tailwind/ui/button";
6import { Card, CardContent, CardHeader, CardTitle } from "@/registry/brook/tailwind/ui/card";
7import { Checkbox, CheckboxIndicator } from "@/registry/brook/tailwind/ui/checkbox";
8import { Field, FieldError, FieldLabel } from "@/registry/brook/tailwind/ui/field";
9import { Form, FormActions, FormGroup } from "@/registry/brook/tailwind/ui/form";
10import { Input } from "@/registry/brook/tailwind/ui/input";
11 
12export function CardLogin() {
13  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
14    e.preventDefault();
15    const formData = new FormData(e.currentTarget);
16    console.log("Form submitted:", Object.fromEntries(formData));
17  };
18 
19  return (
20    <Card className={cn("!p-5 mx-auto w-full max-w-[440px] rounded-[var(--radius-lg)]", "max-sm:!p-4")}>
21      <CardHeader>
22        <CardTitle className={cn("ml-1", "max-sm:text-xl max-sm:leading-[1.3]")}>Sign In</CardTitle>
23      </CardHeader>
24      <CardContent>
25        <Form onSubmit={handleSubmit}>
26          <FormGroup>
27            <Field className="pb-1">
28              <FieldLabel className={cn("ml-1", "max-sm:text-sm")}>Email</FieldLabel>
29              <Input
30                autoComplete="email"
31                name="email"
32                placeholder="Enter your email…"
33                required
34                spellCheck={false}
35                type="email"
36              />
37              <FieldError />
38            </Field>
39 
40            <Field>
41              <div className={cn("flex w-full items-center justify-between", "max-sm:mb-1.5")}>
42                <FieldLabel className={cn("ml-1", "max-sm:text-sm")}>Password</FieldLabel>
43                <button
44                  className={cn(
45                    "mr-1 cursor-pointer border-none bg-transparent p-0 font-light text-[var(--secondary-foreground)] text-sm leading-5 transition-colors duration-200",
46                    "hover:text-[var(--foreground)]",
47                    "max-sm:mr-0 max-sm:min-h-11 max-sm:p-2 max-sm:text-sm"
48                  )}
49                  type="button"
50                >
51                  Forgot password?
52                </button>
53              </div>
54              <Input
55                autoComplete="current-password"
56                name="password"
57                placeholder="Enter your password…"
58// … truncated