// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Timeline 04 * @description Changelog timeline with version history and categorized changes. * Great for release notes, version history, or product updates. * * @slots timeline, timeline-container, timeline-header, timeline-title, * timeline-description, timeline-list, timeline-item, timeline-dot, * timeline-version-badge, timeline-version-date, timeline-version-title, * timeline-version-content, timeline-change-list, timeline-change-item, * timeline-change-icon, timeline-change-text * @variant changelog * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Rocket, Wrench, Bug, Sparkles } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type ChangeType = "feature" | "improvement" | "fix" | "breaking" interface Change { id: string type: ChangeType description: string } interface Version { id: string version: string date: string title: string changes: Change[] } interface Timeline04Props { heading?: string description?: string versions?: Version[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultVersions: Version[] = [ { id: "version-1", version: "2.1.0", date: "January 15, 2025", title: "Dark Mode & Performance", changes: [ { id: "change-1", type: "feature", description: "Added dark mode support across all components" }, { id: "change-2", type: "improvement", description: "Improved loading speed by 40%" }, { id: "change-3", type: "fix", description: "Fixed navigation menu on mobile devices" }, ], }, { id: "version-2", version: "2.0.0", date: "December 20, 2024", title: "Major Update", changes: [ { id: "change-4", type: "breaking", description: "Updated API authentication method" }, { id: "change-5", type: "feature", description: "New dashboard with analytics" }, { id: "change-6", type: "feature", description: "Real-time collaboration features" }, { id: "change-7", type: "improvement", description: "Redesigned settings panel" }, ], }, { id: "version-3", version: "1.5.0", date: "November 10, 2024", title: "Bug Fixes & Polish", changes: [ { id: "change-8", type: "fix", description: "Fixed date picker timezone issues" }, { id: "change-9", type: "fix", description: "Resolved memory leak in file upload" }, { id: "change-10", type: "improvement", description: "Better error messages" }, ], }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const changeConfig: Record = { feature: { icon: Sparkles, bgClass: "bg-green-100 dark:bg-green-900/30", iconClass: "text-green-600 dark:text-green-400", }, improvement: { icon: Rocket, bgClass: "bg-blue-100 dark:bg-blue-900/30", iconClass: "text-blue-600 dark:text-blue-400", }, fix: { icon: Bug, bgClass: "bg-orange-100 dark:bg-orange-900/30", iconClass: "text-orange-600 dark:text-orange-400", }, breaking: { icon: Wrench, bgClass: "bg-red-100 dark:bg-red-900/30", iconClass: "text-red-600 dark:text-red-400", }, } // ============================================================================ // COMPONENT // ============================================================================ function Timeline04({ heading = "Changelog", description = "All notable changes to this project", versions = defaultVersions, className, idBase = "timeline-04", }: Timeline04Props) { const headingId = `${idBase}-heading` return (

{heading}

{description}

{/* Vertical line */}

{versions.map((version) => (

{/* Dot */}

v{version.version} {version.date}

{version.title}

{change.description}

))}

) } export default Timeline04 export { Timeline04, type Timeline04Props }