{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-notification-demo",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "halo-notification"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-notification-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { AnimatePresence } from \"motion/react\"\n\nimport { HaloPolishedNotification } from \"@/registry/default/ui/halo-notification\"\n\nconst SAMPLES: {\n  description: string\n  politeness: \"alert\" | \"status\"\n  title: string\n}[] = [\n  {\n    politeness: \"status\",\n    title: \"Saved to workspace\",\n    description:\n      \"Your changes are synced. You can continue editing or invite collaborators from the share menu.\",\n  },\n  {\n    politeness: \"status\",\n    title: \"Copied to clipboard\",\n    description: \"The snippet is ready to paste wherever you need it.\",\n  },\n  {\n    politeness: \"alert\",\n    title: \"Connection lost\",\n    description:\n      \"We will retry automatically. Check your network if this message persists.\",\n  },\n]\n\nexport default function HaloNotificationDemo() {\n  const [visible, setVisible] = useState(true)\n  const [index, setIndex] = useState(0)\n  const [slideFrom, setSlideFrom] = useState<\"top\" | \"bottom\">(\"bottom\")\n\n  const sample = SAMPLES[index % SAMPLES.length] ?? SAMPLES[0]\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"flex w-full max-w-lg flex-col items-center gap-10\">\n        <div className=\"text-center\">\n          <h2 className=\"font-semibold text-foreground text-xl\">\n            Local notification\n          </h2>\n          <p className=\"mt-2 max-w-md text-pretty text-muted-foreground text-sm\">\n            Brief status or alert messages with a frosted surface, icon, title,\n            and body copy. Enter and exit with slide and fade from the top or\n            bottom edge.\n          </p>\n        </div>\n\n        <div className=\"flex min-h-40 w-full items-start justify-center\">\n          <AnimatePresence mode=\"wait\">\n            {visible ? (\n              <HaloPolishedNotification\n                className=\"max-w-sm\"\n                description={sample.description}\n                key={`${index}-${sample.title}-${slideFrom}`}\n                messageKey={String(index)}\n                onDismiss={() => setVisible(false)}\n                politeness={sample.politeness}\n                slideFrom={slideFrom}\n                title={sample.title}\n              />\n            ) : null}\n          </AnimatePresence>\n        </div>\n\n        <div className=\"flex w-full flex-col items-center gap-4\">\n          <div className=\"flex flex-wrap items-center justify-center gap-2\">\n            <button\n              className=\"rounded-lg border border-border bg-card px-3 py-2 font-medium text-foreground text-sm shadow-sm transition-colors fine-hover:hover:bg-muted\"\n              onClick={() =>\n                setSlideFrom((s) => (s === \"bottom\" ? \"top\" : \"bottom\"))\n              }\n              type=\"button\"\n            >\n              Slide from: {slideFrom === \"bottom\" ? \"bottom\" : \"top\"}\n            </button>\n          </div>\n          <div className=\"flex flex-wrap items-center justify-center gap-2\">\n            <button\n              className=\"rounded-lg border border-border bg-card px-3 py-2 font-medium text-foreground text-sm shadow-sm transition-colors fine-hover:hover:bg-muted\"\n              onClick={() => setVisible(true)}\n              type=\"button\"\n            >\n              Show\n            </button>\n            <button\n              className=\"rounded-lg border border-border bg-card px-3 py-2 font-medium text-foreground text-sm shadow-sm transition-colors fine-hover:hover:bg-muted\"\n              onClick={() => setVisible(false)}\n              type=\"button\"\n            >\n              Hide\n            </button>\n            <button\n              className=\"rounded-lg border border-border bg-primary px-3 py-2 font-medium text-primary-foreground text-sm shadow-sm transition-colors fine-hover:hover:bg-primary/90\"\n              onClick={() => {\n                setVisible(true)\n                setIndex((i) => i + 1)\n              }}\n              type=\"button\"\n            >\n              Next message\n            </button>\n          </div>\n        </div>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}