Thread Timeline Demo

1import {
2  ThreadTimeline,
3  ThreadTimelineItem,
4} from "@/registry/loomui/thread-timeline"
5 
6const ENTRIES = [
7  {
8    meta: "March",
9    title: "First thread",
10    body: "One component, copied by hand, with the timings left as props.",
11  },
12  {
13    meta: "May",
14    title: "The registry",
15    body: "Every component installable in a single command, keyframes included.",
16  },
17  {
18    meta: "July",
19    title: "Reduced motion",
20    body: "Every animation got a resting state worth looking at.",
21  },
22  {
23    meta: "August",
24    title: "Sections",
25    body: "Whole blocks, not just the pieces they are cut from.",
26  },
27]
28 
29export default function ThreadTimelineDemo() {
30  return (
31    <ThreadTimeline className="w-full max-w-md">
32      {ENTRIES.map((entry, index) => (
33        <ThreadTimelineItem
34          key={entry.title}
35          meta={entry.meta}
36          title={entry.title}
37          marker={index + 1}
38        >
39          {entry.body}
40        </ThreadTimelineItem>
41      ))}
42    </ThreadTimeline>
43  )
44}