Card Login

1"use client";
2import { Check } from "lucide-react";
3import { Badge } from "@/registry/brook/ui/badge/badge";
4import { Button } from "@/registry/brook/ui/button/button";
5import { Card, CardContent, CardHeader, CardTitle } from "@/registry/brook/ui/card/card";
6import { Checkbox, CheckboxIndicator } from "@/registry/brook/ui/checkbox/checkbox";
7import { Field, FieldError, FieldLabel } from "@/registry/brook/ui/field/field";
8import { Form, FormActions, FormGroup } from "@/registry/brook/ui/form/form";
9import { Input } from "@/registry/brook/ui/input/input";
10import styles from "./card-login.module.css";
11 
12export default function CardLoginDemo() {
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={styles.card}>
21      <CardHeader>
22        <CardTitle className={styles.cardTitle}>Sign In</CardTitle>
23      </CardHeader>
24      <CardContent>
25        <Form className={styles.form} onSubmit={handleSubmit}>
26          <FormGroup>
27            <Field className={styles.emailField}>
28              <FieldLabel className={styles.fieldLabel}>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={styles.passwordLabelRow}>
42                <FieldLabel className={styles.fieldLabel}>Password</FieldLabel>
43                <button className={styles.forgotPassword} type="button">
44                  Forgot password?
45                </button>
46              </div>
47              <Input
48                autoComplete="current-password"
49                name="password"
50                placeholder="Enter your password…"
51                required
52                type="password"
53              />
54              <FieldError />
55            </Field>
56 
57            <label className={styles.checkboxLabel} htmlFor="remember-me">
58              <Checkbox defaultChecked={false} id="remember-me" name="rememberMe">
59                <CheckboxIndicator>
60                  <Check size={16} strokeWidth={3} />
61                </CheckboxIndicator>
62              </Checkbox>
63// … truncated