add-event-form.tsx
unknown
typescript
a year ago
6.0 kB
35
Indexable
'use client'; import { DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import { Separator } from '@/components/ui/separator'; import { DatePickerWithRange } from '@/components/ui/ranged-date-picker'; import { Checkbox } from '@/components/ui/checkbox'; import { useState } from 'react'; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form'; import { useFormState } from 'react-dom'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; import { SubmitButton } from '@/app/ui/form-submit-button'; import { addEvent } from '@/app/lib/actions'; import { AddEventFormSchema } from '@/app/lib/definitions'; import { Link } from 'lucide-react'; // Make either time required or allDay required export default function AddEventForm() { const [state, action] = useFormState(addEvent, undefined); const [isChecked, setIsChecked] = useState(false); const form = useForm<z.infer<typeof AddEventFormSchema>>({ resolver: zodResolver(AddEventFormSchema), defaultValues: { title: '', description: '', dates: "", startTime: '', endTime: '', checkbox: false, }, }); return ( <Form {...form}> <form action={action} > <DialogHeader> <DialogTitle className="text-2xl">Create event</DialogTitle> </DialogHeader> <div className="grid gap-4 pt-2"> <FormField control={form.control} name="title" render={({ field }) => ( <FormItem> <FormLabel>Title</FormLabel> <FormControl> <Input placeholder="Event name" type="text" {...field} /> </FormControl> {state?.errors?.title && ( <p className="text-sm text-red-500">{state.errors.title}</p> )} <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="description" render={({ field }) => ( <FormItem> <FormLabel>Description</FormLabel> <FormControl> <Textarea id="description" className="col-span-3" {...field} /> </FormControl> {state?.errors?.description && ( <p className="text-sm text-red-500"> {state.errors.description} </p> )} <FormMessage /> </FormItem> )} /> </div> <FormField control={form.control} name="dates" render={({ field }) => ( <FormItem className="flex flex-col pt-3"> <FormLabel>Start - End</FormLabel> <DatePickerWithRange></DatePickerWithRange> <FormMessage /> </FormItem> )} /> <div className="grid gap-4 pt-2"> <div className="flex flex-col items-start gap-2"> <div className="flex gap-4"> <FormField control={form.control} name="startTime" render={({ field }) => ( <FormItem> <FormLabel>Start time</FormLabel> <FormControl> <Input type="time" className="mt-1 w-auto" name="startTime" disabled={isChecked} ></Input> </FormControl> {state?.errors?.startTime && ( <p className="text-sm text-red-500"> {state.errors.startTime} </p> )} <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="endTime" render={({ field }) => ( <FormItem> <FormLabel>End time</FormLabel> <FormControl> <Input type="time" className="mt-1 w-auto" name="endTime" disabled={isChecked} ></Input> </FormControl> {state?.errors?.endTime && ( <p className="text-sm text-red-500"> {state.errors.endTime} </p> )} <FormMessage /> </FormItem> )} /> </div> <FormField control={form.control} name="checkbox" render={({ field }) => ( <FormItem className="mt-2 flex flex-row items-start space-x-2 space-y-0"> <FormControl> <Checkbox onCheckedChange={() => setIsChecked(!isChecked) } /> </FormControl> <div className="space-y-1 leading-none"> <FormLabel>All Day</FormLabel> </div> </FormItem> )} /> </div> </div> <SubmitButton>Submit</SubmitButton> </form> </Form> ); }
Editor is loading...
Leave a Comment