{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing",
  "title": "Pricing",
  "description": "A block for displaying pricing information with a rough styling.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "utils",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json",
    "https://www.bydefaulthuman.fun/r/badge.json",
    "https://www.bydefaulthuman.fun/r/button.json",
    "https://www.bydefaulthuman.fun/r/card.json",
    "https://www.bydefaulthuman.fun/r/seperator.json",
    "https://www.bydefaulthuman.fun/r/rough-highlight.json"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/NotificationCenterBlock.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Avatar } from \"@/components/crumble/ui/avatar\";\nimport { Badge } from \"@/components/crumble/ui/badge\";\nimport { Button } from \"@/components/crumble/ui/button\";\nimport { Card } from \"@/components/crumble/ui/card\";\nimport { Separator } from \"@/components/crumble/ui/separator\";\nimport { Toggle } from \"@/components/crumble/ui/toggle\";\n\nexport interface Notification {\n  body: string;\n  fallback: string;\n  id: number | string;\n  read: boolean;\n  time: string;\n  title: string;\n  type: \"mention\" | \"deploy\" | \"comment\" | \"alert\";\n}\n\nexport interface NotificationCenterBlockProps {\n  markAllReadLabel?: string;\n  muteLabel?: string;\n  notifications?: Notification[];\n  onDismiss?: (id: Notification[\"id\"]) => void;\n  onMarkAllRead?: () => void;\n  onMuteChange?: (muted: boolean) => void;\n  title?: string;\n}\n\nconst DEFAULT_NOTIFICATIONS: Notification[] = [\n  {\n    id: 1,\n    fallback: \"AC\",\n    title: \"Alice mentioned you\",\n    body: \"Can you review the rough tabs refactor before lunch?\",\n    time: \"Just now\",\n    read: false,\n    type: \"mention\",\n  },\n  {\n    id: 2,\n    fallback: \"DP\",\n    title: \"Production deploy finished\",\n    body: \"Version 0.4.2 reached production without rollout errors.\",\n    time: \"18 min ago\",\n    read: false,\n    type: \"deploy\",\n  },\n  {\n    id: 3,\n    fallback: \"CD\",\n    title: \"New comment on stat-card\",\n    body: \"The trend icon alignment is still off at smaller widths.\",\n    time: \"1 hr ago\",\n    read: true,\n    type: \"comment\",\n  },\n  {\n    id: 4,\n    fallback: \"!\",\n    title: \"Build warning detected\",\n    body: \"A type mismatch appeared in the chart package after the last merge.\",\n    time: \"3 hr ago\",\n    read: true,\n    type: \"alert\",\n  },\n];\n\nconst TYPE_VARIANT: Record<Notification[\"type\"], \"default\" | \"success\" | \"warning\" | \"outline\"> =\n  {\n    mention: \"default\",\n    deploy: \"success\",\n    comment: \"outline\",\n    alert: \"warning\",\n  };\n\nexport function NotificationCenterBlock({\n  markAllReadLabel = \"Mark all read\",\n  muteLabel = \"Mute\",\n  notifications = DEFAULT_NOTIFICATIONS,\n  onDismiss,\n  onMarkAllRead,\n  onMuteChange,\n  title = \"Notifications\",\n}: NotificationCenterBlockProps) {\n  const [items, setItems] = useState(notifications);\n  const [muted, setMuted] = useState(false);\n\n  useEffect(() => {\n    setItems(notifications);\n  }, [notifications]);\n\n  const unreadCount = items.filter((item) => !item.read).length;\n\n  return (\n    <Card padding={24} style={{ overflow: \"visible\" }} className=\"w-full max-w-md\">\n      <div className=\"mb-4 flex items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"text-sm font-semibold\">{title}</p>\n          {unreadCount > 0 ? <Badge variant=\"destructive\">{unreadCount}</Badge> : null}\n        </div>\n        <Toggle\n          checked={muted}\n          label={muteLabel}\n          onChange={(nextMuted) => {\n            setMuted(nextMuted);\n            onMuteChange?.(nextMuted);\n          }}\n        />\n      </div>\n\n      <div className=\"mb-4 flex justify-end\">\n        <Button\n          onClick={() => {\n            setItems((current) => current.map((item) => ({ ...item, read: true })));\n            onMarkAllRead?.();\n          }}\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          {markAllReadLabel}\n        </Button>\n      </div>\n\n      <div className=\"flex flex-col gap-3\">\n        {items.map((item, index) => (\n          <div key={item.id}>\n            <div className=\"flex items-start gap-3\">\n              <Avatar fallback={item.fallback} size={34} />\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <p className={item.read ? \"text-sm font-medium opacity-70\" : \"text-sm font-medium\"}>\n                      {item.title}\n                    </p>\n                    <Badge variant={TYPE_VARIANT[item.type]}>{item.type}</Badge>\n                  </div>\n                  <button\n                    className=\"text-xs text-muted-foreground transition-colors hover:text-foreground\"\n                    onClick={() => {\n                      setItems((current) => current.filter((notification) => notification.id !== item.id));\n                      onDismiss?.(item.id);\n                    }}\n                    type=\"button\"\n                  >\n                    Dismiss\n                  </button>\n                </div>\n                <p className=\"mt-1 text-sm text-muted-foreground\">{item.body}</p>\n                <p className=\"mt-2 text-[11px] uppercase tracking-[0.15em] text-muted-foreground/60\">\n                  {item.time}\n                </p>\n              </div>\n            </div>\n            {index < items.length - 1 ? <Separator className=\"mt-3\" /> : null}\n          </div>\n        ))}\n      </div>\n    </Card>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/blocks/notification-center.tsx"
    }
  ],
  "type": "registry:block"
}