open: boolean

onOpenChange: (open: boolean) => void

onAddAssignment: (data: Assignment) => void

creatorEmail: string

const [title, setTitle] = useState("")

const [subject, setSubject] = useState("")

const [teacher, setTeacher] = useState("")

const [className, setClassName] = useState("")

const [dueDate, setDueDate] = useState("")

const handleSubmit = (e: React.FormEvent) => {

e.preventDefault()

// Here you would typically send this data to your backend

const newAssignment = { title, subject, teacher, className, dueDate, creatorEmail }

onAddAssignment(newAssignment)

console.log("New assignment:", { title, subject, class: className, dueDate, creatorEmail })

onOpenChange(false)

}

return (

<Dialog open={open} onOpenChange={onOpenChange}>

<DialogContent>

<DialogHeader>

<DialogTitle>Add New Assignment</DialogTitle>

<DialogDescription>

Enter the details of the new assignment here. Click save when you&apos;re done.

</DialogDescription>

</DialogHeader>

<form onSubmit={handleSubmit}>

<div className="grid gap-4 py-4">

<div className="grid grid-cols-4 items-center gap-4">

<Label htmlFor="title" className="text-right">

Title

</Label>

<Input id="title" value={title} onChange={(e) => setTitle(e.target.value)} className="col-span-3" />

</div>

<div className="grid grid-cols-4 items-center gap-4">

<Label htmlFor="subject" className="text-right">

Subject

</Label>

<Input id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} className="col-span-3" />

</div>

<div className="grid grid-cols-4 items-center gap-4">

<Label htmlFor="teacher" className="text-right">

Teacher

</Label>

<Input id="teacher" value={teacher} onChange={(e) => setTeacher(e.target.value)} className="col-span-3" />

</div>

<div className="grid grid-cols-4 items-center gap-4">

<Label htmlFor="class" className="text-right">

Class

</Label>

<Input

id="class"

value={className}

onChange={(e) => setClassName(e.target.value)}

className="col-span-3"

/>

</div>

<div className="grid grid-cols-4 items-center gap-4">

<Label htmlFor="dueDate" className="text-right">

Due Date

</Label>

<Input

id="dueDate"

type="date"

value={dueDate}

onChange={(e) => setDueDate(e.target.value)}

className="col-span-3"

/>

</div>

</div>

<DialogFooter>

<Button type="submit">Save changes</Button>

</DialogFooter>

</form>

</DialogContent>

</Dialog>

)