"use client"; import { Children, cloneElement, createContext, CSSProperties, HTMLAttributes, ReactElement, useContext, useLayoutEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { cva, VariantProps } from "class-variance-authority"; // CSS VARIANTS // Dot in the center of the timeline item const timelineDotVariants = cva( "relative h-4 w-4 rounded-full z-10 flex items-center justify-center", { variants: { variant: { default: "border-primary", secondary: "border-secondary", destructive: "border-destructive", outline: "" }, hollow: { true: "border-2 bg-card", false: "border-2" } }, compoundVariants: [ { hollow: false, variant: "default", class: "bg-primary" }, { hollow: false, variant: "secondary", class: "bg-secondary" }, { hollow: false, variant: "destructive", class: "bg-destructive" }, { hollow: false, variant: "outline", class: "bg-background" } ], defaultVariants: { variant: "default", hollow: false } } ); // Card container const timelineItemVariants = cva( "flex flex-col rounded-md transition-all p-4 shrink-0", { variants: { variant: { default: "bg-card border text-card-foreground shadow-sm", secondary: "bg-secondary text-secondary-foreground shadow-sm", destructive: "bg-destructive/10 border border-destructive/20 text-destructive-foreground shadow-sm", outline: "bg-transparent border shadow-sm" }, noCards: { true: "border-none shadow-none bg-transparent", false: "" } }, defaultVariants: { variant: "default", noCards: false } } ); // Branch connecting dot to card const timelineBranchVariants = cva("absolute z-0", { variants: { variant: { default: "bg-primary", secondary: "bg-secondary", destructive: "bg-destructive", outline: "bg-border" } }, defaultVariants: { variant: "default" } }); // Timeline layout container const timelineLayoutVariants = cva("grid relative", { variants: { orientation: { horizontal: "grid-flow-col grid-rows-[min-content_2rem_min-content]", vertical: "grid-cols-[1fr_2rem_1fr] auto-rows-min" } }, defaultVariants: { orientation: "horizontal" } }); // Timeline item container (card + dot + line + branch) const timelineItemContainerVariants = cva("flex relative snap-center", { variants: { orientation: { horizontal: "w-full justify-center", vertical: "h-full items-center" }, side: { before: "", after: "" } }, compoundVariants: [ { orientation: "horizontal", side: "before", class: "items-end" }, { orientation: "horizontal", side: "after", class: "items-start" }, { orientation: "vertical", side: "before", class: "justify-end" }, { orientation: "vertical", side: "after", class: "justify-start" } ] }); // EXPORTED INTERFACES AND COMPONENTS export interface TimelineItemProps extends HTMLAttributes, VariantProps { hollow?: boolean; } type _timelineItemProps = TimelineItemProps & { index?: number | null; }; export interface TimelineProps extends HTMLAttributes, VariantProps { children?: React.ReactNode; alternating?: boolean; alignment?: "top/left" | "bottom/right"; horizItemSpacing?: number; horizItemWidth?: number; vertItemSpacing?: number; vertItemMaxWidth?: number; orientation?: "horizontal" | "vertical"; noCards?: boolean; } export interface TimelineItemDateProps extends Omit, "children"> { children: Date | string; } export interface TimelineItemTitleProps extends HTMLAttributes { children: React.ReactNode; } export interface TimelineItemDescriptionProps extends HTMLAttributes { children: React.ReactNode; } type TimelineContextType = { orientation: "horizontal" | "vertical"; total: number; cardWidth: number; maxCardWidth: number; alternating: boolean; alignment: "top/left" | "bottom/right"; noCards: boolean; }; const TlCtxt = createContext(null); function useTimelineContext() { const context = useContext(TlCtxt); if (context === null) { throw new Error( "Timeline components must be used within a Timeline component." ); } return context; } export default function Timeline({ children, className, horizItemWidth = 220, horizItemSpacing = 130, vertItemSpacing = 130, vertItemMaxWidth = 350, alternating = true, alignment = "top/left", orientation = "horizontal", noCards = false, ...props }: TimelineProps) { const isVertical = orientation === "vertical"; const safePadding = Math.max(0, (horizItemWidth - horizItemSpacing) / 2); const [verticalPadding, setVerticalPadding] = useState({ top: 0, bottom: 0 }); const listRef = useRef(null); useLayoutEffect(() => { if (!isVertical || !listRef.current) { setVerticalPadding({ top: 0, bottom: 0 }); return; } const computePadding = () => { const list = listRef.current; if (!list) return; // Find all cards const cards = list.querySelectorAll('[data-timeline-card="true"]'); if (cards.length === 0) return; const firstCard = cards[0]; const lastCard = cards[cards.length - 1]; // Calculate heights const firstHeight = firstCard.getBoundingClientRect().height; const lastHeight = lastCard.getBoundingClientRect().height; // Formula: (CardHeight - Spacing) / 2 // We use Math.max(0, ...) because if the card is smaller than spacing, // we don't want negative padding. const top = Math.max(0, (firstHeight - vertItemSpacing) / 2); const bottom = Math.max(0, (lastHeight - vertItemSpacing) / 2); setVerticalPadding({ top, bottom }); }; // Run initially computePadding(); // Re-run if window resizes (content wrapping changes height) const observer = new ResizeObserver(() => computePadding()); observer.observe(listRef.current); return () => observer.disconnect(); }, [isVertical, vertItemSpacing, children]); const contextVal: TimelineContextType = { orientation, total: Children.count(children), cardWidth: horizItemWidth, maxCardWidth: vertItemMaxWidth, alternating, alignment, noCards }; return (

{Children.map(children, (child, index) => cloneElement(child as ReactElement, { index }) )}

); } function getGridAndLineStyles( side: "before" | "after", index: number, isVertical: boolean, alternating: boolean ): { gridStyle: CSSProperties; lineStyle: CSSProperties } { let gridStyle: CSSProperties = {}; let lineStyle: CSSProperties = {}; if (isVertical) { // VERTICAL LOGIC if (alternating) { // 3 Columns: [Content] [Line] [Content] gridStyle = { gridColumn: side === "before" ? 1 : 3, gridRow: index + 1 }; lineStyle = { gridColumn: 2, gridRow: index + 1, height: "100%" }; } else { // 2 Columns if (side === "before") { // [Content] [Line] gridStyle = { gridColumn: 1, gridRow: index + 1 }; lineStyle = { gridColumn: 2, gridRow: index + 1, height: "100%" }; } else { // [Line] [Content] gridStyle = { gridColumn: 2, gridRow: index + 1 }; lineStyle = { gridColumn: 1, gridRow: index + 1, height: "100%" }; } } } else { // HORIZONTAL LOGIC if (alternating) { // 3 Rows: [Content] [Line] [Content] gridStyle = { gridColumn: index + 1, gridRow: side === "before" ? 1 : 3 }; lineStyle = { gridColumn: index + 1, gridRow: 2, width: "100%" }; } else { // 2 Rows if (side === "before") { // [Content] // [Line] gridStyle = { gridColumn: index + 1, gridRow: 1 }; lineStyle = { gridColumn: index + 1, gridRow: 2, width: "100%" }; } else { // [Line] // [Content] gridStyle = { gridColumn: index + 1, gridRow: 2 }; lineStyle = { gridColumn: index + 1, gridRow: 1, width: "100%" }; } } } return { gridStyle, lineStyle }; } function getCardStyle( isVertical: boolean, cardWidth: number, maxCardWidth: number ): CSSProperties { return isVertical ? { maxWidth: `${maxCardWidth}px` } : { width: `${cardWidth}px`, minWidth: `${cardWidth}px`, maxWidth: `${cardWidth}px` }; } function getBranchStyle( isVertical: boolean, isEven: boolean, alternating: boolean, alignment: "top/left" | "bottom/right" ): string { return isVertical ? alternating ? isEven ? "h-px w-4 left-0" : "h-px w-4 right-0" : alignment === "top/left" ? "h-px w-4 left-0" : "h-px w-4 right-0" : alternating ? isEven ? "w-px h-4 top-0" : "w-px h-4 bottom-0" : alignment === "top/left" ? "w-px h-4 top-0" : "w-px h-4 bottom-0"; } export function TimelineItem({ children, className, variant, hollow = false, index = null, ...props }: _timelineItemProps) { if (index == null) { throw new Error("TimelineItem must be used as a direct child of Timeline."); } const { orientation, total, cardWidth, maxCardWidth, alternating, alignment, noCards } = useTimelineContext(); const isEven = index % 2 === 0; const isVertical = orientation === "vertical"; // Determine "side" based on index const side = alternating ? isEven ? "before" : "after" : alignment === "top/left" ? "before" : "after"; const { gridStyle, lineStyle } = getGridAndLineStyles( side, index, isVertical, alternating ); return ( <>

{children}

); } export function TimelineItemDate({ children, className, ...props }: TimelineItemDateProps) { return ( {children instanceof Date ? ( {dateFormatter.format(children)} ) : ( children )} ); } export function TimelineItemTitle({ children, className, ...props }: TimelineItemTitleProps) { return (

{children}

); } export function TimelineItemDescription({ children, className, ...props }: TimelineItemDescriptionProps) { return (

{children}

); } const dateFormatter = new Intl.DateTimeFormat("en-US", { day: "numeric", month: "short", year: "numeric" });