{
  "name": "banner-stacked-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "banner",
    "button"
  ],
  "files": [
    {
      "path": "examples/banner-stacked-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport {\n  AlertCircle,\n  AlertTriangle,\n  CheckCircle,\n  Info,\n  ServerCrash,\n  Sparkles,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  BannerActions,\n  BannerClose,\n  BannerContent,\n  BannerDescription,\n  BannerIcon,\n  Banners,\n  BannerTitle,\n  useBanners,\n} from \"@/registry/bases/base/ui/banner\";\nimport { Button } from \"@/registry/bases/base/ui/button\";\n\nexport default function BannerStackedDemo() {\n  return (\n    <Banners maxVisible={1}>\n      <BannerControls />\n    </Banners>\n  );\n}\n\nfunction BannerControls() {\n  const { onBannerAdd, banners } = useBanners();\n\n  const onInfoBannerAdd = React.useCallback(() => {\n    onBannerAdd({\n      variant: \"info\",\n      content: (\n        <>\n          <BannerIcon>\n            <Info />\n          </BannerIcon>\n          <BannerContent>\n            <BannerTitle>Information</BannerTitle>\n            <BannerDescription>\n              This is an informational message.\n            </BannerDescription>\n          </BannerContent>\n          <BannerClose />\n        </>\n      ),\n    });\n  }, [onBannerAdd]);\n\n  const onSuccessBannerAdd = React.useCallback(() => {\n    onBannerAdd({\n      variant: \"success\",\n      content: (\n        <>\n          <BannerIcon>\n            <CheckCircle />\n          </BannerIcon>\n          <BannerContent>\n            <BannerTitle>Success!</BannerTitle>\n            <BannerDescription>\n              Your changes have been saved successfully.\n            </BannerDescription>\n          </BannerContent>\n          <BannerClose />\n        </>\n      ),\n    });\n  }, [onBannerAdd]);\n\n  const onWarningBannerAdd = React.useCallback(() => {\n    onBannerAdd({\n      variant: \"warning\",\n      content: ({ onClose }) => (\n        <>\n          <BannerIcon>\n            <AlertTriangle />\n          </BannerIcon>\n          <BannerContent>\n            <BannerTitle>Warning</BannerTitle>\n            <BannerDescription>\n              Please review your changes before continuing.\n            </BannerDescription>\n          </BannerContent>\n          <BannerActions>\n            <Button size=\"sm\" variant=\"default\">\n              Review\n            </Button>\n            <Button size=\"sm\" variant=\"ghost\" onClick={onClose}>\n              Skip\n            </Button>\n          </BannerActions>\n        </>\n      ),\n    });\n  }, [onBannerAdd]);\n\n  const onDestructiveBannerAdd = React.useCallback(() => {\n    onBannerAdd({\n      variant: \"destructive\",\n      content: (\n        <>\n          <BannerIcon>\n            <AlertCircle />\n          </BannerIcon>\n          <BannerContent>\n            <BannerTitle>Action required</BannerTitle>\n            <BannerDescription>\n              Your session is about to expire. Please save your work.\n            </BannerDescription>\n          </BannerContent>\n          <BannerActions>\n            <Button size=\"sm\" variant=\"destructive\">\n              Save now\n            </Button>\n            <BannerClose />\n          </BannerActions>\n        </>\n      ),\n    });\n  }, [onBannerAdd]);\n\n  const onAppVersionBannerAdd = React.useCallback(() => {\n    onBannerAdd({\n      variant: \"info\",\n      priority: 0,\n      content: (\n        <>\n          <BannerIcon>\n            <Sparkles />\n          </BannerIcon>\n          <BannerContent>\n            <BannerTitle>New version available</BannerTitle>\n            <BannerDescription>\n              Version 2.0 is now available with exciting new features.\n            </BannerDescription>\n          </BannerContent>\n          <BannerActions>\n            <Button size=\"sm\" variant=\"default\">\n              Update\n            </Button>\n            <BannerClose />\n          </BannerActions>\n        </>\n      ),\n    });\n  }, [onBannerAdd]);\n\n  const onSystemHealthBannerAdd = React.useCallback(() => {\n    onBannerAdd({\n      variant: \"destructive\",\n      priority: 10,\n      content: (\n        <>\n          <BannerIcon>\n            <ServerCrash />\n          </BannerIcon>\n          <BannerContent>\n            <BannerTitle>System outage</BannerTitle>\n            <BannerDescription>\n              Some services are currently unavailable. We&apos;re working on it.\n            </BannerDescription>\n          </BannerContent>\n          <BannerClose />\n        </>\n      ),\n    });\n  }, [onBannerAdd]);\n\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-2.5\">\n        <h3 className=\"font-semibold text-base\">\n          Stacked Banners ({banners.length} in queue)\n        </h3>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button onClick={onInfoBannerAdd} variant=\"outline\" size=\"sm\">\n            Add Info\n          </Button>\n          <Button onClick={onSuccessBannerAdd} variant=\"outline\" size=\"sm\">\n            Add Success\n          </Button>\n          <Button onClick={onWarningBannerAdd} variant=\"outline\" size=\"sm\">\n            Add Warning\n          </Button>\n          <Button onClick={onDestructiveBannerAdd} variant=\"outline\" size=\"sm\">\n            Add Destructive\n          </Button>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2.5\">\n        <h3 className=\"font-semibold text-base\">Priority</h3>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button onClick={onAppVersionBannerAdd} variant=\"outline\" size=\"sm\">\n            App Version (priority: 0)\n          </Button>\n          <Button onClick={onSystemHealthBannerAdd} variant=\"outline\" size=\"sm\">\n            System Health (priority: 10)\n          </Button>\n        </div>\n        <div className=\"text-muted-foreground text-sm\">\n          Higher priority banners jump ahead in the queue.\n          <br />\n          Try adding the app version banner first, then the system health\n          banner.\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}