{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-539",
  "type": "registry:component",
  "title": "Comp 539",
  "description": "Comp 539",
  "files": [
    {
      "path": "registry/ui-basic/comp-539.tsx",
      "content": "import {\n\tTimeline,\n\tTimelineContent,\n\tTimelineItem,\n} from \"@/components/ui/timeline\";\nimport {\n\tBookOpenIcon,\n\tLucideIcon,\n\tMessageCircleIcon,\n\tPencilIcon,\n\tPlusIcon,\n} from \"lucide-react\";\n\nconst items: {\n\tid: number;\n\tuser: string;\n\timage: string;\n\taction: ActionType;\n\tdate: Date;\n}[] = [\n\t{\n\t\tid: 1,\n\t\tuser: \"Matt\",\n\t\timage: \"/avatar-40-02.jpg\",\n\t\taction: \"post\",\n\t\tdate: new Date(Date.now() - 59000), // 59 seconds ago\n\t},\n\t{\n\t\tid: 2,\n\t\tuser: \"Matt\",\n\t\timage: \"/avatar-40-02.jpg\",\n\t\taction: \"reply\",\n\t\tdate: new Date(Date.now() - 180000), // 3 minutes ago\n\t},\n\t{\n\t\tid: 3,\n\t\tuser: \"Matt\",\n\t\timage: \"/avatar-40-02.jpg\",\n\t\taction: \"edit\",\n\t\tdate: new Date(Date.now() - 300000), // 5 minutes ago\n\t},\n\t{\n\t\tid: 4,\n\t\tuser: \"Matt\",\n\t\timage: \"/avatar-40-02.jpg\",\n\t\taction: \"create\",\n\t\tdate: new Date(Date.now() - 600000), // 10 minutes ago\n\t},\n];\n\ntype ActionType = \"post\" | \"reply\" | \"edit\" | \"create\";\n\nfunction getActionIcon(action: ActionType): LucideIcon {\n\tconst icons: Record<ActionType, LucideIcon> = {\n\t\tpost: BookOpenIcon,\n\t\treply: MessageCircleIcon,\n\t\tedit: PencilIcon,\n\t\tcreate: PlusIcon,\n\t};\n\treturn icons[action];\n}\n\nfunction getActionText(action: ActionType): string {\n\tconst texts: Record<ActionType, string> = {\n\t\tpost: \"wrote a new post\",\n\t\treply: \"replied to a comment\",\n\t\tedit: \"edited a post\",\n\t\tcreate: \"created a new project\",\n\t};\n\treturn texts[action];\n}\n\nfunction getRelativeTimeString(date: Date): string {\n\tconst now = new Date();\n\tconst diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);\n\n\tif (diffInSeconds < 60) {\n\t\treturn `${diffInSeconds} seconds ago`;\n\t} else if (diffInSeconds < 3600) {\n\t\tconst minutes = Math.floor(diffInSeconds / 60);\n\t\treturn `${minutes} ${minutes === 1 ? \"minute\" : \"minutes\"} ago`;\n\t} else if (diffInSeconds < 86400) {\n\t\tconst hours = Math.floor(diffInSeconds / 3600);\n\t\treturn `${hours} ${hours === 1 ? \"hour\" : \"hours\"} ago`;\n\t} else {\n\t\tconst days = Math.floor(diffInSeconds / 86400);\n\t\treturn `${days} ${days === 1 ? \"day\" : \"days\"} ago`;\n\t}\n}\n\nexport default function Component() {\n\treturn (\n\t\t<div className=\"space-y-3\">\n\t\t\t<div className=\"text-muted-foreground text-xs font-medium\">\n\t\t\t\tActivity\n\t\t\t</div>\n\t\t\t<Timeline>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst ActionIcon = getActionIcon(item.action);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TimelineItem\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tstep={item.id}\n\t\t\t\t\t\t\tclassName=\"m-0! flex-row items-center gap-3 py-2.5!\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActionIcon\n\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground/80\"\n\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={item.image}\n\t\t\t\t\t\t\t\talt={item.user}\n\t\t\t\t\t\t\t\tclassName=\"size-6 rounded-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TimelineContent className=\"text-foreground\">\n\t\t\t\t\t\t\t\t<a className=\"font-medium hover:underline\" href=\"#\">\n\t\t\t\t\t\t\t\t\t{item.user}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<span className=\"font-normal\">\n\t\t\t\t\t\t\t\t\t{\" \"}\n\t\t\t\t\t\t\t\t\t{getActionText(item.action)}{\" \"}\n\t\t\t\t\t\t\t\t\t<a className=\"hover:underline\" href=\"#\">\n\t\t\t\t\t\t\t\t\t\t{getRelativeTimeString(item.date)}\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</TimelineContent>\n\t\t\t\t\t\t</TimelineItem>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Timeline>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}