typescript "use client"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import Link from "next/link"; const formSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address.", }), password: z.string().min(8, { message: "Password must be at least 8 characters.", }), confirmPassword: z.string().min(8, { message: "Password must be at least 8 characters.", }), }).refine((data) => data.password === data.confirmPassword, { message: "Passwords don't match.", path: ["confirmPassword"], // set the error on the confirmPassword field }); export function RegisterForm() { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "", confirmPassword: "", }, }); function onSubmit(values: z.infer) { // Do something with the form values. // ✅ This will be type-safe and validated. console.log(values); // Handle registration logic here } return ( Register Enter your email below to create your account. {/* Optional: Add social login buttons here */} {/*

Or continue with

*/}

Already have an account?{" "} Sign in

); }