{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-item",
  "type": "registry:ui",
  "title": "Notification item",
  "description": "A single notification row with an unread dot and tint, a truncated title, relative time and a short body line. Stack it in React inboxes and activity feeds.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/relative-time.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/notification-item.tsx",
      "type": "registry:ui",
      "target": "components/ui/notification-item.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { RelativeTime } from \"@/components/ui/relative-time\"\n\n/** NotificationItem — one row of a notification list: title, body, relative time and an unread dot. */\n\n// A fixed offset from now, floored to the minute so server and client agree.\nfunction minutesAgo(minutes: number) {\n  return new Date(Math.floor(Date.now() / 60000) * 60000 - minutes * 60000)\n}\n\ntype NotificationItemProps = {\n  title?: string\n  body?: string\n  /** When it happened. Defaults to 42 minutes ago. */\n  date?: string | Date\n  unread?: boolean\n  className?: string\n}\n\nfunction NotificationItem({\n  title = \"Invoice INV-2041 paid\",\n  body = \"Northwind paid $12,400.00 by bank transfer. Funds settle in two business days.\",\n  date,\n  unread,\n  className,\n}: NotificationItemProps) {\n  const when = React.useMemo(() => date ?? minutesAgo(42), [date])\n  return (\n    <div data-slot=\"notification-item\" className={cn(\"flex gap-3 border-b border-border px-3 py-3\", unread && \"bg-accent/5\", className)}>\n      <span className={cn(\"mt-1.5 size-2 shrink-0 rounded-full\", unread ? \"bg-accent\" : \"bg-transparent\")} aria-hidden />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <p className=\"truncate text-sm font-medium text-fg\">{title}</p>\n          <RelativeTime date={when} />\n        </div>\n        <p className=\"mt-0.5 text-xs text-fg-muted\">{body}</p>\n      </div>\n    </div>\n  )\n}\nexport { NotificationItem }\nexport type { NotificationItemProps }\n"
    }
  ]
}