import React from 'react'; interface TimelineItem { id: number; title: string; date: string; description: string; status?: 'completed' | 'current' | 'upcoming'; icon?: React.ReactNode; } interface TimelineProps { items: TimelineItem[]; } const Timeline: React.FC = ({ items }) => { const getStatusColor = (status?: string) => { switch (status) { case 'completed': return 'bg-green-500'; case 'current': return 'bg-blue-500'; case 'upcoming': return 'bg-gray-300'; default: return 'bg-gray-500'; } }; return (

{items.map((item, index) => (

{item.icon || ( )}

{index !== items.length - 1 && (

)}

{item.title}

{item.date}

{item.description}

))}

); }; // Example usage component const TimelineExample = () => { const timelineItems: TimelineItem[] = [ { id: 1, title: "Project Started", date: "January 2024", description: "Initial project kickoff and team formation. Setting up project infrastructure and defining key milestones.", status: "completed" }, { id: 2, title: "Design Phase", date: "February 2024", description: "Creating wireframes, user flows, and finalizing the design system. Conducting user research and gathering feedback.", status: "completed" }, { id: 3, title: "Development", date: "March 2024", description: "Implementation of core features and functionality. Regular code reviews and testing procedures in place.", status: "current" }, { id: 4, title: "Testing & QA", date: "April 2024", description: "Comprehensive testing phase including unit tests, integration tests, and user acceptance testing.", status: "upcoming" }, { id: 5, title: "Launch", date: "May 2024", description: "Product launch and deployment to production. Monitoring system performance and user feedback.", status: "upcoming" } ]; return ; }; export default TimelineExample;

Timeline Example

Usage