{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cookie-consent-4",
  "title": "Blocking Consent Dialog",
  "description": "Modal cookie consent dialog over a dimmed page, blocking interaction until accept all, reject, or manage is chosen.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "dialog"
  ],
  "files": [
    {
      "path": "registry/blocks/cookie-consent/4/cookie-consent-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nfunction FauxPage() {\n  return (\n    <div\n      className=\"mx-auto w-full max-w-3xl space-y-6 opacity-60\"\n      aria-hidden=\"true\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <div className=\"h-6 w-28 rounded-md bg-muted\" />\n        <div className=\"flex gap-2\">\n          <div className=\"h-6 w-16 rounded-md bg-muted\" />\n          <div className=\"h-6 w-16 rounded-md bg-muted\" />\n        </div>\n      </div>\n      <div className=\"h-48 w-full rounded-lg bg-muted\" />\n      <div className=\"space-y-3\">\n        <div className=\"h-4 w-3/4 rounded-md bg-muted\" />\n        <div className=\"h-4 w-full rounded-md bg-muted\" />\n        <div className=\"h-4 w-5/6 rounded-md bg-muted\" />\n      </div>\n    </div>\n  )\n}\n\nexport default function CookieConsentBlock() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <section className=\"flex min-h-svh w-full items-start justify-center bg-background px-6 py-16 text-foreground\">\n      <FauxPage />\n      <Dialog open={open} onOpenChange={setOpen} modal>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <div className=\"flex size-10 items-center justify-center rounded-lg border border-border bg-muted text-foreground\">\n              <IconPlaceholder\n                lucide=\"ShieldCheck\"\n                tabler=\"IconShieldCheck\"\n                hugeicons=\"Shield01Icon\"\n                phosphor=\"ShieldCheck\"\n                remixicon=\"RiShieldCheckLine\"\n                className=\"size-5\"\n                aria-hidden=\"true\"\n              />\n            </div>\n            <DialogTitle className=\"mt-3 text-base\">We Use Cookies</DialogTitle>\n            <DialogDescription>\n              We use cookies to keep you signed in, remember your preferences,\n              and understand how the product is used. Read our{\" \"}\n              <a href=\"#\">cookie policy</a> for the details.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter className=\"mt-1 sm:flex-col sm:gap-2\">\n            <Button className=\"w-full\" onClick={() => setOpen(false)}>\n              Accept All\n            </Button>\n            <div className=\"flex gap-2\">\n              <Button\n                variant=\"outline\"\n                className=\"flex-1\"\n                onClick={() => setOpen(false)}\n              >\n                Reject\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"flex-1\"\n                onClick={() => setOpen(false)}\n              >\n                Manage\n              </Button>\n            </div>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/cookie-consent-4.tsx"
    }
  ],
  "meta": {
    "height": "760px",
    "tier": "free"
  },
  "categories": [
    "cookie-consent"
  ],
  "type": "registry:block"
}