{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-4",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/notification-4.tsx",
      "content": "import React from \"react\";\nimport { RiCloseFill } from \"react-icons/ri\";\nimport { cn } from \"@/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\n\nexport interface NotificationSource {\n  name: string;\n  initials: string;\n  avatar?: string;\n}\n\nexport interface NotificationEvent {\n  id: string;\n  source: NotificationSource;\n  title: string;\n  subtitle: string;\n  timestamp: string;\n  unread?: boolean;\n}\n\nexport interface NotificationGroup {\n  id: string;\n  label: string;\n  items: NotificationEvent[];\n}\n\nexport interface Notification4Props {\n  title?: string;\n  countLabel?: string;\n  groups?: NotificationGroup[];\n  onDismiss?: () => void;\n  className?: string;\n}\n\nconst defaultGroups: NotificationGroup[] = [\n  {\n    id: \"morning\",\n    label: \"Morning\",\n    items: [\n      {\n        id: \"launch-checklist\",\n        source: {\n          name: \"Ava Patel\",\n          initials: \"AP\",\n          avatar: \"https://assets.watermelon.sh/wm_mia.png\",\n        },\n        title: \"Ava approved the launch checklist\",\n        subtitle: \"Mobile onboarding release\",\n        timestamp: \"12m ago\",\n        unread: true,\n      },\n      {\n        id: \"priority-review\",\n        source: {\n          name: \"Mateo Cruz\",\n          initials: \"MC\",\n          avatar: \"https://assets.watermelon.sh/wm_alex.png\",\n        },\n        title: \"Mateo assigned a priority review\",\n        subtitle: \"Security handoff notes\",\n        timestamp: \"24m ago\",\n        unread: true,\n      },\n      {\n        id: \"customer-digest\",\n        source: {\n          name: \"Nora Singh\",\n          initials: \"NS\",\n        },\n        title: \"Nora published the customer digest\",\n        subtitle: \"Enterprise workspace summary\",\n        timestamp: \"38m ago\",\n        unread: true,\n      },\n    ],\n  },\n  {\n    id: \"afternoon\",\n    label: \"Afternoon\",\n    items: [\n      {\n        id: \"revenue-notes\",\n        source: {\n          name: \"Kai Morgan\",\n          initials: \"KM\",\n        },\n        title: \"Kai shared updated revenue notes\",\n        subtitle: \"Forecast packet and risk log\",\n        timestamp: \"1h ago\",\n        unread: true,\n      },\n      {\n        id: \"audit-task\",\n        source: {\n          name: \"Iris Chen\",\n          initials: \"IC\",\n          avatar: \"https://assets.watermelon.sh/wm_emma.png\",\n        },\n        title: \"Iris moved the audit task forward\",\n        subtitle: \"Compliance queue\",\n        timestamp: \"2h ago\",\n        unread: true,\n      },\n    ],\n  },\n];\n\nexport default function Notification4({\n  title = \"Notifications\",\n  countLabel,\n  groups = defaultGroups,\n  onDismiss,\n  className,\n}: Notification4Props) {\n  const unreadCount = groups.reduce(\n    (total, group) => total + group.items.filter((item) => item.unread).length,\n    0,\n  );\n\n  return (\n    <section\n      className={cn(\n        \"bg-background flex items-center justify-center\",\n        className,\n      )}\n    >\n      <Card className=\"bg-muted w-full max-w-sm gap-0 rounded-3xl pb-2 ring-0\">\n        <CardHeader className=\"flex flex-row items-center justify-between px-3\">\n          <div className=\"flex items-center gap-1.5\">\n            <h2 className=\"text-foreground text-base font-semibold tracking-tight\">\n              {title}\n            </h2>\n            <Badge\n              variant=\"ghost\"\n              className=\"text-primary hover:text-primary rounded-full text-xs font-medium tabular-nums\"\n            >\n              {countLabel ?? `${unreadCount}+`}\n            </Badge>\n          </div>\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"text-muted-foreground rounded-full\"\n            aria-label=\"Close notifications\"\n            onClick={onDismiss}\n          >\n            <RiCloseFill className=\"h-4 w-4\" />\n          </Button>\n        </CardHeader>\n\n        <CardContent className=\"space-y-2 px-2\">\n          {groups.map((group) => (\n            <NotificationGroupCard key={group.id} group={group} />\n          ))}\n        </CardContent>\n      </Card>\n    </section>\n  );\n}\n\nfunction NotificationGroupCard({ group }: { group: NotificationGroup }) {\n  return (\n    <section className=\"bg-card overflow-hidden rounded-2xl\">\n      <div className=\"px-5 pt-4\">\n        <p className=\"text-muted-foreground text-sm font-medium\">\n          {group.label}\n        </p>\n      </div>\n\n      <div className=\"px-4 pt-2 pb-2\">\n        {group.items.map((event) => (\n          <React.Fragment key={event.id}>\n            <NotificationEventRow event={event} />\n          </React.Fragment>\n        ))}\n      </div>\n    </section>\n  );\n}\n\nfunction NotificationEventRow({ event }: { event: NotificationEvent }) {\n  return (\n    <article className=\"group hover:bg-muted/50 flex items-center gap-2 rounded-md px-1 py-1 transition-colors sm:gap-3\">\n      <Avatar className=\"h-10 w-10 shrink-0 border-none ring-0\">\n        <AvatarImage\n          src={event.source.avatar}\n          alt={event.source.name}\n          className=\"border-black/5 dark:border-white/5\"\n        />\n        <AvatarFallback className=\"bg-muted text-muted-foreground text-xs font-semibold\">\n          {event.source.initials}\n        </AvatarFallback>\n      </Avatar>\n\n      <div className=\"min-w-0 flex-1\">\n        <h3 className=\"text-foreground truncate text-sm font-medium\">\n          {event.title}\n        </h3>\n        <p className=\"text-muted-foreground mt-0.5 truncate text-xs\">\n          {event.subtitle}\n        </p>\n      </div>\n\n      <div className=\"flex shrink-0 items-center\">\n        <span className=\"text-muted-foreground text-xs\">{event.timestamp}</span>\n      </div>\n    </article>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/notification-4.tsx"
    }
  ],
  "type": "registry:ui"
}