50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { Calendar1Icon } from "lucide-react";
|
|
import type { CalendarEvent } from "@/lib/types";
|
|
import { EventCard } from "./event-card";
|
|
|
|
interface EventsListProps {
|
|
events: CalendarEvent[];
|
|
onEdit: (event: CalendarEvent) => void;
|
|
onDelete: (eventId: string) => void;
|
|
}
|
|
|
|
export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
|
|
if (events.length === 0) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="flex flex-col items-center justify-center py-16 text-center"
|
|
>
|
|
<div className="glass-card p-6 inline-flex flex-col items-center">
|
|
<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
|
<h3 className="text-sm font-medium text-muted-foreground">
|
|
No events yet
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground/60 mt-1">
|
|
Create your first event to get started
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<AnimatePresence mode="popLayout">
|
|
{events.map((event) => (
|
|
<EventCard
|
|
key={event.id}
|
|
event={event}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
/>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|