47 lines
1.3 KiB
TypeScript
47 lines
1.3 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 rounded-[10px] border border-dashed border-border/80 bg-muted/30 px-6 py-16 text-center shadow-[inset_0_0_0_1px_rgba(255,255,255,0.35)]"
|
|
>
|
|
<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
|
<h3 className="text-sm font-medium text-foreground">No events yet</h3>
|
|
<p className="mt-1 max-w-sm text-xs leading-relaxed text-muted-foreground/70">
|
|
Capture something with AI or open manual create from More to start
|
|
building your event timeline.
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<AnimatePresence mode="popLayout">
|
|
{events.map((event) => (
|
|
<EventCard
|
|
key={event.id}
|
|
event={event}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
/>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|