Project Timeline - Copy this React, Tailwind Component to your project

Create a modern, interactive, and visually appealing Project Management Timeline component for Haraka using Next.js, Tailwind CSS, and ShadCN. The timeline should visually represent project milestones, tasks, and key events in a structured and intuitive manner. The component should be fully responsive, user-friendly, and scalable to support different project sizes. It should align with Haraka’s brand identity and follow best practices in UI/UX. 1. Tech Stack & Requirements Framework: Next.js (App Router) Styling: Tailwind CSS for utility-based styling Component Library: ShadCN for UI components Animations: Framer Motion (for smooth transitions) Data Handling: Dynamic props or API integration for project data 2. Timeline Features & Functionalities A. Layout & Structure A vertical timeline layout that displays project phases, tasks, or milestones in chronological order. Each timeline item should include: Task/Milestone Title Date & Time Status (Completed, In Progress, Pending, Delayed) Assignee (User Avatar) Expandable Details Section B. Interactive & Visual Enhancements Hover Effects: Highlight timeline items on hover for better visibility. Expandable Sections: Click on an item to expand details (e.g., description, subtasks). Status Color Coding: ✅ Completed - Green 🔄 In Progress - Blue ⏳ Pending - Yellow ⚠️ Delayed - Red Progress Indicator: A visual bar showing project completion percentage. Smooth Animations: Fade-in effects when loading items. C. Data Integration & Customization Dynamic Data Support: Fetch project milestones from an API or pass via props. Filter & Search: Ability to filter by date, status, or assignee. Dark Mode Support: Compatible with Haraka’s dark mode toggle.