import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent } from "@/components/ui/card"; import { Tag } from "lucide-react"; interface TimelineEvent { id: string; title: string; time: string; description?: string; } interface TimelineActivity { id: string; user: { name: string; avatar?: string; initials: string; }; action: string; target?: string; time: string; status?: { label: string; variant: "default" | "secondary" | "destructive" | "outline"; }; comment?: string; tags?: Array<{ label: string; variant: "default" | "secondary" | "destructive" | "outline"; }>; } interface BasicTimelineProps { events: TimelineEvent[]; } interface AdvancedTimelineProps { activities: TimelineActivity[]; } export function BasicTimeline({ events }: BasicTimelineProps) { return (

Basic

{/* Timeline line */}

{events.map((event, index) => (

{/* Timeline dot */}

{/* Event content */}

{event.title} - {event.time}

{event.description && (

{event.description}

)}

))}

); } export function AdvancedTimeline({ activities }: AdvancedTimelineProps) { return (

Advance

{/* Timeline line */}

{activities.map((activity, index) => (

{/* Avatar */}

{activity.user.initials}

{/* Activity content */}

{activity.user.name} {activity.action} {activity.target && ( {activity.target} )} {activity.status && (

{activity.status.label} )} {activity.time}

{activity.comment && (

{activity.comment}

)} {activity.tags && activity.tags.length > 0 && (

added tags

{activity.tags.map((tag, tagIndex) => ( {tag.label} ))}

)}

))}

); } export default function Page() { const basicEvents: TimelineEvent[] = [ { id: "1", title: "Breakfast", time: "09:00" }, { id: "2", title: "Lunch", time: "12:30" }, { id: "3", title: "Dinner", time: "7:00" } ]; const advancedActivities: TimelineActivity[] = [ { id: "1", user: { name: "Angelina Gotelli", initials: "AG", avatar: "/professional-woman-avatar.png" }, action: "has change the status to", status: { label: "Completed", variant: "default" }, time: "6h ago" }, { id: "2", user: { name: "Max Alexander", initials: "MA", avatar: "/professional-man-avatar.png" }, action: "comment on your", target: "Post", time: "2d ago", comment: "Fine, Java MIGHT be a good example of what a programming language should be like. But Java applications are good examples of what applications SHOULDN'T be like." }, { id: "3", user: { name: "Eugene Stewart", initials: "ES", avatar: "/developer-avatar.png" }, action: "added tags", time: "2d ago", tags: [ { label: "Live Issue", variant: "destructive" }, { label: "Backend", variant: "default" } ] } ]; return (

); }