Dmytro Stanchiev
eb73f9f929
- Extract EventCard, EventsList, and event dialog into separate components - Add new AI toolbar and drag-drop container components - Simplify main page.tsx by removing inline component definitions - Improve code organization and maintainability
97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
|
import { Input } from '@/components/ui/input'
|
|
import { RecurrencePicker } from '@/components/recurrence-picker'
|
|
|
|
interface EventDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
editingId: string | null
|
|
title: string
|
|
setTitle: (title: string) => void
|
|
description: string
|
|
setDescription: (description: string) => void
|
|
location: string
|
|
setLocation: (location: string) => void
|
|
url: string
|
|
setUrl: (url: string) => void
|
|
start: string
|
|
setStart: (start: string) => void
|
|
end: string
|
|
setEnd: (end: string) => void
|
|
allDay: boolean
|
|
setAllDay: (allDay: boolean) => void
|
|
recurrenceRule: string | undefined
|
|
setRecurrenceRule: (rule: string | undefined) => void
|
|
onSave: () => void
|
|
onReset: () => void
|
|
}
|
|
|
|
export const EventDialog = ({
|
|
open,
|
|
onOpenChange,
|
|
editingId,
|
|
title,
|
|
setTitle,
|
|
description,
|
|
setDescription,
|
|
location,
|
|
setLocation,
|
|
url,
|
|
setUrl,
|
|
start,
|
|
setStart,
|
|
end,
|
|
setEnd,
|
|
allDay,
|
|
setAllDay,
|
|
recurrenceRule,
|
|
setRecurrenceRule,
|
|
onSave,
|
|
onReset
|
|
}: EventDialogProps) => {
|
|
const handleOpenChange = (val: boolean) => {
|
|
if (!val) onReset()
|
|
onOpenChange(val)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
|
|
</DialogHeader>
|
|
<Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
|
<textarea
|
|
className="border rounded p-2 w-full"
|
|
placeholder="Description"
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
/>
|
|
<Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
|
|
<Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
|
|
<RecurrencePicker value={recurrenceRule} onChange={setRecurrenceRule} />
|
|
|
|
<label className="flex items-center gap-2 mt-2">
|
|
<input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
|
|
All day event
|
|
</label>
|
|
{!allDay ? (
|
|
<>
|
|
<Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
|
|
<Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Input type="date" value={start ? start.split('T')[0] : ''} onChange={e => setStart(e.target.value)} />
|
|
<Input type="date" value={end ? end.split('T')[0] : ''} onChange={e => setEnd(e.target.value)} />
|
|
</>
|
|
)}
|
|
<DialogFooter>
|
|
<Button onClick={onSave}>{editingId ? 'Update' : 'Save'}</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|