"use client" /** * @name Timeline 06 * @description Compact vertical timeline with expandable details. * Great for changelog, version history, or step-by-step guides. * * @slots timeline, timeline-container, timeline-header, timeline-heading, * timeline-description, timeline-list, timeline-item, timeline-line, * timeline-node, timeline-node-icon, timeline-content, timeline-header-row, * timeline-version, timeline-date, timeline-toggle, timeline-title, * timeline-summary, timeline-details, timeline-detail-item * @variant expandable * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { ChevronDown, Rocket, Bug, Sparkles, Wrench } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type ChangeType = "feature" | "fix" | "improvement" | "breaking" interface ChangelogItem { id: string version: string date: string type: ChangeType title: string summary: string details?: string[] } interface Timeline06Props { heading?: string description?: string items?: ChangelogItem[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: ChangelogItem[] = [ { id: "item-1", version: "v2.5.0", date: "December 15, 2024", type: "feature", title: "New Dashboard Analytics", summary: "Introducing comprehensive analytics with real-time insights.", details: ["Real-time data streaming", "Custom report builder", "Export to PDF/CSV", "Team performance metrics"], }, { id: "item-2", version: "v2.4.2", date: "December 8, 2024", type: "fix", title: "Bug Fixes and Performance", summary: "Critical bug fixes and performance improvements.", details: ["Fixed login timeout issue", "Improved page load times by 40%", "Resolved memory leak in dashboard"], }, { id: "item-3", version: "v2.4.0", date: "November 30, 2024", type: "improvement", title: "Enhanced User Experience", summary: "Major UI/UX improvements based on user feedback.", details: ["Redesigned navigation", "Dark mode support", "Keyboard shortcuts", "Accessibility improvements"], }, { id: "item-4", version: "v2.3.0", date: "November 15, 2024", type: "breaking", title: "API v2 Migration", summary: "Breaking changes to support new API architecture.", details: ["New authentication flow", "Updated endpoint structure", "Deprecated v1 endpoints"], }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const typeConfig: Record = { feature: { icon: Rocket, colorClass: "bg-green-500", label: "Feature" }, fix: { icon: Bug, colorClass: "bg-red-500", label: "Fix" }, improvement: { icon: Sparkles, colorClass: "bg-blue-500", label: "Improvement" }, breaking: { icon: Wrench, colorClass: "bg-amber-500", label: "Breaking" }, } // ============================================================================ // COMPONENT // ============================================================================ function Timeline06({ heading = "Changelog", description = "Stay updated with our latest features, improvements, and fixes.", items = defaultItems, className, idBase = "timeline-06", }: Timeline06Props) { const headingId = `${idBase}-heading` const [expandedItems, setExpandedItems] = React.useState>( new Set([items[0]?.id]) ) const toggleItem = (id: string) => { setExpandedItems((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) } return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Timeline List */}

{items.map((item, index) => { const config = typeConfig[item.type] const Icon = config.icon const isExpanded = expandedItems.has(item.id) const isLast = index === items.length - 1 return (

{/* Line */} {!isLast && (

)} {/* Node */}

{/* Content */}

{/* Header Row */}

{item.version} {item.date}

{/* Title */}

{item.title}

{/* Summary */}

{item.summary}

{/* Details Toggle */} {item.details && item.details.length > 0 && ( <> {/* Details List */} {isExpanded && (

{detail}

)} )}

) })}

) } export default Timeline06 export { Timeline06, type Timeline06Props }