"use client" import { zodResolver } from "@hookform/resolvers/zod" import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" import { format } from "date-fns" import { useForm } from "react-hook-form" import { z } from "zod" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, } from "@/components/ui/command" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { toast } from "@/components/ui/use-toast" const languages = [ { label: "English", value: "en" }, { label: "French", value: "fr" }, { label: "German", value: "de" }, { label: "Spanish", value: "es" }, { label: "Portuguese", value: "pt" }, { label: "Russian", value: "ru" }, { label: "Japanese", value: "ja" }, { label: "Korean", value: "ko" }, { label: "Chinese", value: "zh" }, ] as const const accountFormSchema = z.object({ name: z .string() .min(2, { message: "Name must be at least 2 characters.", }) .max(30, { message: "Name must not be longer than 30 characters.", }), dob: z.date({ required_error: "A date of birth is required.", }), language: z.string({ required_error: "Please select a language.", }), }) type AccountFormValues = z.infer // This can come from your database or API. const defaultValues: Partial = { // name: "Your name", // dob: new Date("2023-01-23"), } export function AccountForm() { const form = useForm({ resolver: zodResolver(accountFormSchema), defaultValues, }) function onSubmit(data: AccountFormValues) { toast({ title: "You submitted the following values:", description: (

          {JSON.stringify(data, null, 2)}

), }) } return (

( Name This is the name that will be displayed on your profile and in emails. )} /> ( Date of birth date > new Date() || date < new Date("1900-01-01") } initialFocus /> Your date of birth is used to calculate your age. )} /> ( Language No language found. {languages.map((language) => ( { form.setValue("language", language.value) }} > {language.label} ))} This is the language that will be used in the dashboard. )} /> ) }