{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-536",
  "type": "registry:component",
  "title": "Comp 536",
  "description": "Comp 536",
  "files": [
    {
      "path": "registry/ui-basic/comp-536.tsx",
      "content": "import {\r\n\tTimeline,\r\n\tTimelineContent,\r\n\tTimelineDate,\r\n\tTimelineHeader,\r\n\tTimelineIndicator,\r\n\tTimelineItem,\r\n\tTimelineSeparator,\r\n\tTimelineTitle,\r\n} from \"@/components/ui/timeline\";\r\n\r\nconst items = [\r\n\t{\r\n\t\tid: 1,\r\n\t\tdate: \"15 minutes ago\",\r\n\t\ttitle: \"Hannah Kandell\",\r\n\t\taction: \"opened a new issue\",\r\n\t\tdescription:\r\n\t\t\t\"I'm having trouble with the new component library. It's not rendering properly.\",\r\n\t\timage: \"/avatar-40-01.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 2,\r\n\t\tdate: \"10 minutes ago\",\r\n\t\ttitle: \"Chris Tompson\",\r\n\t\taction: \"commented on\",\r\n\t\tdescription:\r\n\t\t\t\"Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.\",\r\n\t\timage: \"/avatar-40-02.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 3,\r\n\t\tdate: \"5 minutes ago\",\r\n\t\ttitle: \"Emma Davis\",\r\n\t\taction: \"assigned you to\",\r\n\t\tdescription:\r\n\t\t\t\"The new component library is not rendering properly. Can you take a look?\",\r\n\t\timage: \"/avatar-40-03.jpg\",\r\n\t},\r\n\t{\r\n\t\tid: 4,\r\n\t\tdate: \"2 minutes ago\",\r\n\t\ttitle: \"Alex Morgan\",\r\n\t\taction: \"closed the issue\",\r\n\t\tdescription: \"The issue has been fixed. Please review the changes.\",\r\n\t\timage: \"/avatar-40-05.jpg\",\r\n\t},\r\n];\r\n\r\nexport default function Component() {\r\n\treturn (\r\n\t\t<Timeline>\r\n\t\t\t{items.map((item) => (\r\n\t\t\t\t<TimelineItem\r\n\t\t\t\t\tkey={item.id}\r\n\t\t\t\t\tstep={item.id}\r\n\t\t\t\t\tclassName=\"group-data-[orientation=vertical]/timeline:ms-10 not-last:group-data-[orientation=vertical]/timeline:pb-8\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<TimelineHeader>\r\n\t\t\t\t\t\t<TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\r\n\t\t\t\t\t\t<TimelineTitle className=\"mt-0.5\">\r\n\t\t\t\t\t\t\t{item.title}{\" \"}\r\n\t\t\t\t\t\t\t<span className=\"text-muted-foreground text-sm font-normal\">\r\n\t\t\t\t\t\t\t\t{item.action}\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</TimelineTitle>\r\n\t\t\t\t\t\t<TimelineIndicator className=\"bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7\">\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\tsrc={item.image}\r\n\t\t\t\t\t\t\t\talt={item.title}\r\n\t\t\t\t\t\t\t\tclassName=\"size-6 rounded-full\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</TimelineIndicator>\r\n\t\t\t\t\t</TimelineHeader>\r\n\t\t\t\t\t<TimelineContent className=\"text-foreground mt-2 rounded-lg border px-4 py-3\">\r\n\t\t\t\t\t\t{item.description}\r\n\t\t\t\t\t\t<TimelineDate className=\"mt-1 mb-0\">{item.date}</TimelineDate>\r\n\t\t\t\t\t</TimelineContent>\r\n\t\t\t\t</TimelineItem>\r\n\t\t\t))}\r\n\t\t</Timeline>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}