signup-3

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import {
    Field,
    FieldDescription,
    FieldGroup,
    FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import Image from "next/image"

export default function SignupForm({
    className,
    ...props
}: React.ComponentProps<"div">) {
    return (
        <section>
            <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
                <div className="flex w-full max-w-sm flex-col gap-6">
                    <Link href={"/"} className="flex items-center justify-center">
                        <Image src={"https://tailwind-admin.com/images/logo/white-logo.svg"} alt="Tailwindadmin white logo" width={200} height={40} className="dark:block hidden" />
                    </Link>
                    <div className={cn("flex flex-col gap-6", className)} {...props}>
                        <Card>
                            <CardHeader className="text-center">
                                <CardTitle className="text-xl">Create your account</CardTitle>
                                <CardDescription>
                                    Enter your email below to create your account
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                <form>
                                    <FieldGroup>
                                        <Field>
                                            <FieldLabel htmlFor="name">Full Name</FieldLabel>
                                            <Input id="name" type="text" placeholder="John Doe" required />
                                        </Field>
                                        <Field>
                                            <FieldLabel htmlFor="email">Email</FieldLabel>
                                            <Input
                                                id="email"
                                                type="email"
                                                placeholder="m@example.com"
                                                required
                                            />
                                        </Field>
                                        <Field>
                                            <Field className="grid grid-cols-2 gap-4">
                                                <Field>
                                                    <FieldLabel htmlFor="password">Password</FieldLabel>
                                                    <Input id="password" type="password" required />
                                                </Field>
                                                <Field>
                                                    <FieldLabel htmlFor="confirm-password">
                                                        Confirm Password
                                                    </FieldLabel>
                                                    <Input id="confirm-password" type="password" required />
                                                </Field>
                                            </Field>
                                            <FieldDescription>
                                                Must be at least 8 characters long.
                                            </FieldDescription>
                                        </Field>
                                        <Field>
                                            <Button type="submit">Create Account</Button>
                                            <FieldDescription className="text-center">
                                                Already have an account? <a href="#">Sign in</a>
                                            </FieldDescription>
                                        </Field>
                                    </FieldGroup>
                                </form>
                            </CardContent>
                        </Card>
                        <FieldDescription className="px-6 text-center">
                            By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
                            and <a href="#">Privacy Policy</a>.
                        </FieldDescription>
                    </div>
                </div>
            </div>
        </section>
    )
}