"use client"; import type { HTMLAttributes } from "react"; import { useId, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; export type TimelineFoldEvent = { id: string; date: string; title: string; detail: string }; type TimelineFoldCardProps = HTMLAttributes & { events: TimelineFoldEvent[]; activeId?: string; defaultActiveId?: string; onActiveIdChange?: (id: string) => void; title?: string; reducedMotion?: boolean; }; export function TimelineFoldCard({ events, activeId, defaultActiveId, onActiveIdChange, title = "Release history", reducedMotion, className = "", ...props }: TimelineFoldCardProps) { const systemReducedMotion = useReducedMotion(); const reduceMotion = Boolean(reducedMotion || systemReducedMotion); const uid = useId(); const [internalId, setInternalId] = useState(defaultActiveId ?? events[0]?.id ?? ""); const selectedId = activeId ?? internalId; const toggle = (id: string) => { const next = selectedId === id ? "" : id; if (activeId === undefined) setInternalId(next); onActiveIdChange?.(next); }; return (

{title}

{events.length} {events.length === 1 ? "entry" : "entries"}

{open ? (
{event.detail}
) : null}

); }