{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "important-alerts-card",
  "title": "Important Alerts Card",
  "description": "Scrollable alert feed with tone icons, date pills, and a week-range control.",
  "dependencies": [
    "lucide-react@^1.33.0"
  ],
  "registryDependencies": [
    "https://components.exe.xyz/r/chip.json",
    "https://components.exe.xyz/r/icon-button.json",
    "https://components.exe.xyz/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/important-alerts-card.tsx",
      "content": "\"use client\"\n\nimport {\n  AlertTriangle,\n  CheckCircle2,\n  ChevronLeft,\n  ChevronRight,\n  Info,\n  XCircle,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Chip } from \"@/components/ui/chip\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\nexport type AlertTone = \"warning\" | \"info\" | \"success\" | \"error\"\n\nexport type ImportantAlert = {\n  id: string\n  tone: AlertTone\n  title: string\n  body: string\n  dateLabel: string\n}\n\nconst toneCopy: Record<AlertTone, string> = {\n  warning: \"Warning\",\n  info: \"Information\",\n  success: \"Success\",\n  error: \"Error\",\n}\n\nconst toneIcon: Record<AlertTone, typeof Info> = {\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  error: XCircle,\n}\n\nconst toneClass: Record<AlertTone, string> = {\n  warning:\n    \"bg-[color-mix(in_srgb,var(--chart-4)_18%,transparent)] text-[var(--chart-4)]\",\n  info: \"bg-primary/10 text-primary\",\n  success:\n    \"bg-[color-mix(in_srgb,var(--chart-2)_18%,transparent)] text-[var(--chart-2)]\",\n  error: \"bg-destructive/10 text-destructive\",\n}\n\nexport function ImportantAlertsCard({\n  alerts,\n  weekLabel,\n  onPrevWeek,\n  onNextWeek,\n  countLabel,\n  className,\n}: {\n  alerts: ImportantAlert[]\n  weekLabel: string\n  onPrevWeek?: () => void\n  onNextWeek?: () => void\n  countLabel?: string\n  className?: string\n}) {\n  const count = countLabel ?? `${alerts.length} this week`\n\n  return (\n    <section\n      data-slot=\"important-alerts-card\"\n      aria-label=\"Important alerts\"\n      className={cn(\n        \"flex h-full w-full min-h-0 max-w-md flex-col overflow-hidden rounded-[2px] border border-border bg-card\",\n        className\n      )}\n    >\n      <header className=\"flex items-start justify-between gap-3 border-b border-border px-3 py-3\">\n        <div className=\"min-w-0\">\n          <h2 className=\"font-heading text-sm font-medium\">Important alerts</h2>\n          <p className=\"font-mono text-[11px] text-muted-foreground\">{count}</p>\n        </div>\n        <WeekRangePill\n          label={weekLabel}\n          onPrev={onPrevWeek}\n          onNext={onNextWeek}\n        />\n      </header>\n      <div className=\"min-h-0 flex-1 overflow-y-auto\">\n        {alerts.length === 0 ? (\n          <p className=\"px-3 py-8 text-center text-sm text-muted-foreground\">\n            No alerts this week\n          </p>\n        ) : (\n          <ul className=\"flex flex-col\">\n            {alerts.map((alert) => {\n              const Icon = toneIcon[alert.tone]\n              return (\n                <li\n                  key={alert.id}\n                  className=\"border-b border-border last:border-b-0\"\n                >\n                  <article className=\"flex gap-3 px-3 py-3\">\n                    <span\n                      className={cn(\n                        \"inline-flex size-8 shrink-0 items-center justify-center rounded-full\",\n                        toneClass[alert.tone]\n                      )}\n                    >\n                      <Icon className=\"size-3.5\" aria-hidden />\n                    </span>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <h3 className=\"text-sm font-medium\">\n                          <span className=\"sr-only\">\n                            {toneCopy[alert.tone]}:{\" \"}\n                          </span>\n                          {alert.title}\n                        </h3>\n                        <Chip variant=\"outline\" className=\"shrink-0\">\n                          {alert.dateLabel}\n                        </Chip>\n                      </div>\n                      <p className=\"mt-1 text-sm text-muted-foreground\">\n                        {alert.body}\n                      </p>\n                    </div>\n                  </article>\n                </li>\n              )\n            })}\n          </ul>\n        )}\n      </div>\n    </section>\n  )\n}\n\nfunction WeekRangePill({\n  label,\n  onPrev,\n  onNext,\n}: {\n  label: string\n  onPrev?: () => void\n  onNext?: () => void\n}) {\n  return (\n    <div className=\"inline-flex shrink-0 items-center rounded-[2px] border border-border bg-background\">\n      <IconButton\n        icon={ChevronLeft}\n        size=\"small\"\n        variant=\"ghost\"\n        aria-label=\"Previous week\"\n        className=\"size-6\"\n        onClick={onPrev}\n      />\n      <span className=\"px-1 font-mono text-[11px] whitespace-nowrap\">\n        {label}\n      </span>\n      <IconButton\n        icon={ChevronRight}\n        size=\"small\"\n        variant=\"ghost\"\n        aria-label=\"Next week\"\n        className=\"size-6\"\n        onClick={onNext}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}