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
35 lines
990 B
TypeScript
35 lines
990 B
TypeScript
import { Calendar1Icon } from 'lucide-react'
|
|
import { EventCard } from './event-card'
|
|
import type { CalendarEvent } from '@/lib/types'
|
|
|
|
interface EventsListProps {
|
|
events: CalendarEvent[]
|
|
onEdit: (event: CalendarEvent) => void
|
|
onDelete: (eventId: string) => void
|
|
}
|
|
|
|
export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
|
|
if (events.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
|
<Calendar1Icon className='h-12 w-12 text-muted-foreground mb-4' />
|
|
<h3 className="text-lg font-medium text-muted-foreground">No events yet</h3>
|
|
<p className="text-sm text-muted-foreground">Create your first event to get started</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{events.map(event => (
|
|
<EventCard
|
|
key={event.id}
|
|
event={event}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|