// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Timeline 05 * @description Milestone roadmap timeline with progress bar and phase indicators. * Great for project planning, product roadmaps, or goal tracking. * * @slots timeline, timeline-container, timeline-header, timeline-badge, * timeline-heading, timeline-description, timeline-progress, * timeline-progress-bar, timeline-progress-fill, timeline-progress-text, * timeline-milestones, timeline-milestone, timeline-milestone-marker, * timeline-milestone-content, timeline-milestone-title, timeline-milestone-date, * timeline-milestone-tasks, timeline-task * @variant roadmap * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Check, Circle, Flag } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type MilestoneStatus = "completed" | "current" | "upcoming" interface Task { id: string name: string completed: boolean } interface Milestone { id: string title: string date: string status: MilestoneStatus tasks: Task[] } interface Timeline05Props { sectionBadge?: string heading?: string description?: string milestones?: Milestone[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMilestones: Milestone[] = [ { id: "milestone-1", title: "Planning & Research", date: "Q1 2024", status: "completed", tasks: [ { id: "task-1", name: "Market research", completed: true }, { id: "task-2", name: "User interviews", completed: true }, { id: "task-3", name: "Feature prioritization", completed: true }, ], }, { id: "milestone-2", title: "Development Phase 1", date: "Q2 2024", status: "completed", tasks: [ { id: "task-4", name: "Core architecture", completed: true }, { id: "task-5", name: "Authentication system", completed: true }, { id: "task-6", name: "Database design", completed: true }, ], }, { id: "milestone-3", title: "Beta Launch", date: "Q3 2024", status: "current", tasks: [ { id: "task-7", name: "UI implementation", completed: true }, { id: "task-8", name: "API integration", completed: true }, { id: "task-9", name: "Testing & QA", completed: false }, ], }, { id: "milestone-4", title: "Public Release", date: "Q4 2024", status: "upcoming", tasks: [ { id: "task-10", name: "Performance optimization", completed: false }, { id: "task-11", name: "Documentation", completed: false }, { id: "task-12", name: "Marketing launch", completed: false }, ], }, ] // ============================================================================ // HELPERS // ============================================================================ function calculateProgress(milestones: Milestone[]): number { const totalTasks = milestones.reduce((acc, m) => acc + m.tasks.length, 0) const completedTasks = milestones.reduce( (acc, m) => acc + m.tasks.filter((t) => t.completed).length, 0 ) return totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0 } // ============================================================================ // COMPONENT // ============================================================================ function Timeline05({ sectionBadge = "Roadmap", heading = "Project Milestones", description = "Track our progress from concept to launch.", milestones = defaultMilestones, className, idBase = "timeline-05", }: Timeline05Props) { const headingId = `${idBase}-heading` const progress = calculateProgress(milestones) return (

{/* Header */}

{sectionBadge}

{heading}

{description && (

{description}

)}

{/* Progress */}

Overall Progress {progress}%

{/* Milestones */}

{/* Vertical Line */}

{milestones.map((milestone) => { const isCompleted = milestone.status === "completed" const isCurrent = milestone.status === "current" const completedTasks = milestone.tasks.filter((t) => t.completed).length return (

{/* Marker */}

{isCompleted ? (

{/* Content */}

{milestone.title}

{milestone.date}

{/* Tasks */}

{milestone.tasks.map((task) => (

{task.completed && (

{task.name}

))}

{completedTasks} of {milestone.tasks.length} tasks completed

) })}

) } export default Timeline05 export { Timeline05, type Timeline05Props }