Schema - Copy this React, Tailwind Component to your project

Import React from 'react'; import { useForm } from 'react hook form'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; import { createNotification } from '@/actions/notification'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'; import { FormField, FormItem, FormLabel, FormControl, FormMessage, Form } from '@/components/ui/form'; // Define the Zod schema for validation const notificationSchema = z.object({ title: z.string().min(1, 'Title is required'), message: z.string().min(1, 'Message is required'), type: z.string().min(1, 'Type is required'), track: z.string().optional(), learnersIds: z.string().optional(), }); type NotificationFormData = z.infer<typeof notificationSchema>; export default function AdminNotificationForm() { const form = useForm<NotificationFormData>({ resolver: zodResolver(notificationSchema), mode: 'onChange', }); const { isSubmitting, isValid } = form.formState; const watchedFields = form.watch(['title', 'message', 'type']); const isFormValid = watchedFields.every(field => field && field.length > 0); const onSubmit = async (data: NotificationFormData) => { const { title, message, type, track, learnersIds } = data; await createNotification({ title, message, type, track, }); }; return ( <div className="mt 5 p 5 w full md:w [80%] lg:w [60%] mx auto"> <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex col items center space y 8 mt 8"> <div className="grid gap 4"> {/* title and learnersId */} <div className="grid md:grid cols 2 gap 8"> <FormField control={form.control} name="title" render={({ field }) => ( <FormItem> <FormLabel>Title<small className="ml 2 text [0.8rem]">(Message title)</small></FormLabel> <FormControl> <Input className='w full' {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="learnersIds" render={({ field }) => ( <FormItem> <FormLabel>Learner's IDs (Optional, comma separated)</FormLabel> <FormControl> <Input className="w full" {...field} placeholder="KL/2025/001, KL/2025/100" /> </FormControl> <FormMessage /> </FormItem> )} /> </div> {/* type and track */} <div className="grid md:grid cols 2 gap 8"> <FormField control={form.control} name="type" render={({ field }) => ( <FormItem> <FormLabel>Type</FormLabel> <FormControl> <Select {...field}> <SelectTrigger> <SelectValue placeholder="Select notification type" /> </SelectTrigger> <SelectContent> <SelectItem value="info">Info</SelectItem> <SelectItem value="success">Success</SelectItem> <SelectItem value="warning">Warning</SelectItem> <SelectItem value="error">Error</SelectItem> </SelectContent> </Select> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="track" render={({ field }) => ( <FormItem> <FormLabel>Training Program (Optional)</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value} > <FormControl> <SelectTrigger> <SelectValue placeholder="Select Training Program" /> </SelectTrigger> </FormControl> <SelectContent> <SelectItem value="Software Development"> Software Development </SelectItem> <SelectItem value="Product Management"> Product Management </SelectItem> <SelectItem value="Product (UI/UX) Design"> UI/UX Design </SelectItem> <SelectItem value="Data Analysis"> Data Analysis </SelectItem> <SelectItem value="Digital/Product Marketing"> Digital/Product Marketing </SelectItem> <SelectItem value="Basic Digital Literacy"> Basic Digital Literacy </SelectItem> </SelectContent> </Select> <FormMessage /> </FormItem> )} /></div> {/* message */} <FormField control={form.control} name="message" render={({ field }) => ( <FormItem> <FormLabel>Message</FormLabel> <FormControl> <Textarea {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> </div> <Button type="submit" disabled={isSubmitting || !isFormValid}> {isSubmitting ? 'Submitting...' : 'Send Notification'} </Button> </form> </Form> </div> ); }