{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banner-10",
  "title": "Banner 10 – Inline announcement link",
  "description": "A minimal announcement banner for low-friction updates. Renders as simple inline text with an optional icon and link, plus a close action. Best for subtle product news or secondary announcements that shouldn't compete with primary page content.",
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "blocks/pro-marketing/banners/banner-10/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function Banner10() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) return null;\n\n  return (\n    // To make the banner fixed, add classes like `fixed top-0 inset-x-0 z-50` to the container element\n    <aside\n      role=\"banner\"\n      aria-label=\"Promotional banner\"\n      className=\"w-full bg-muted py-4 text-muted-foreground\"\n    >\n      {/* Banner Container */}\n      <div className=\"mx-auto max-w-7xl px-8\">\n        <div className=\"flex flex-row items-start justify-between gap-9 lg:items-center\">\n          {/* Banner Content */}\n          <div className=\"flex flex-1 items-start gap-1\">\n            <IconPlaceholder\n              lucide=\"AlertCircle\"\n              tabler=\"IconAlertCircle\"\n              hugeicons=\"Alert02Icon\"\n              phosphor=\"WarningCircleIcon\"\n              remixicon=\"RiErrorWarningLine\"\n              className=\"mt-1 size-4 shrink-0\"\n            />\n\n            <p className=\"text-base text-pretty\">\n              <span className=\"font-semibold\">New from Acme Inc: </span>\n              AI Productivity Suite.{\" \"}\n              <a href=\"#\" className=\"underline\">\n                Check it out\n              </a>\n            </p>\n          </div>\n\n          {/* Close Button */}\n          <Button\n            size=\"icon-sm\"\n            className=\"size-6 shrink-0 max-lg:-mt-1 max-lg:-mr-1\"\n            variant=\"ghost\"\n            onClick={() => setIsVisible(false)}\n            aria-label=\"Close banner\"\n          >\n            <IconPlaceholder\n              lucide=\"X\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n          </Button>\n        </div>\n      </div>\n    </aside>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/shadcncraft/pro-marketing/banners/banner-10/index.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "figmaNodeId": "17859-94327",
    "bundle": "pro-marketing"
  },
  "categories": ["banners"],
  "type": "registry:block"
}