import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { AlertColors } from "@/config/siteConfig"; import { cn } from "@/lib/utils"; import { PlusCircle, Trash2 } from "lucide-react"; import { z } from "zod"; import { ScriptSchema } from "../_schemas/schemas"; type Script = z.infer; type NoteProps = { script: Script; setScript: (script: Script) => void; setIsValid: (isValid: boolean) => void; setZodErrors: (zodErrors: z.ZodError | null) => void; }; export default function Note({ script, setScript, setIsValid, setZodErrors, }: NoteProps) { const addNote = () => { const newScript: Script = { ...script, notes: [...script.notes, { text: "", type: "" }], }; setScript(newScript); }; const updateNote = ( index: number, key: keyof Script["notes"][number], value: string, ) => { const updated: Script = { ...script, notes: script.notes.map((note: Script["notes"][number], i: number) => i === index ? { ...note, [key]: value } : note, ), }; const result = ScriptSchema.safeParse(updated); setIsValid(result.success); if (!result.success) { setZodErrors(result.error); } else { setZodErrors(null); } setScript(updated); }; const removeNote = (index: number) => { const newScript: Script = { ...script, notes: script.notes.filter((_: Script["notes"][number], i: number) => i !== index), }; setScript(newScript); }; return ( <>

Notes

{script.notes.map((note, index) => (
) => updateNote(index, "text", e.target.value)} />
))} ); }