{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-page",
  "title": "Error Page",
  "description": "Full-page error and status surfaces — 404, 500, maintenance and access-denied variants with a display-scale code, featured icon, copy, up to two CTAs, an optional backdrop and a search slot.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/backdrop",
    "@nx-ui/button",
    "@nx-ui/featured-icon",
    "@nx-ui/section",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/error-page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AlertTriangle,\n  ArrowLeft,\n  ArrowRight,\n  Lock01,\n  SearchLg,\n  Tool01,\n} from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { FeaturedIcon } from \"@/components/blocks/featured-icon\"\nimport { Backdrop } from \"@/components/blocks/marketing/backdrop\"\nimport { Eyebrow } from \"@/components/blocks/marketing/section\"\n\n/**\n * ErrorPage — the full-page error / status surface, in four ready-made\n * `variant`s (`404`, `500`, `maintenance`, `access-denied`). Each ships a\n * default display code, eyebrow, icon, message and description, all overridable\n * by prop. It centres a featured icon, a display-scale code, the copy, up to two\n * CTAs and an optional `search` slot inside a full-height band, with an optional\n * decorative `Backdrop` behind it.\n *\n * Everything is prop-driven: pass your own `code`/`title`/CTAs, drop a search\n * input into `search`, or swap the whole icon — no routing or data coupling.\n */\n\ntype Variant = \"404\" | \"500\" | \"maintenance\" | \"access-denied\"\n\ninterface VariantPreset {\n  code: string\n  eyebrow: string\n  title: string\n  description: string\n  icon: React.ComponentType<{ className?: string }>\n  color: React.ComponentProps<typeof FeaturedIcon>[\"color\"]\n}\n\nconst PRESETS: Record<Variant, VariantPreset> = {\n  \"404\": {\n    code: \"404\",\n    eyebrow: \"Page not found\",\n    title: \"We couldn’t find that page\",\n    description:\n      \"The page you’re after has moved, been retired, or never existed. Check the address or head back to the marketplace.\",\n    icon: SearchLg,\n    color: \"brand\",\n  },\n  \"500\": {\n    code: \"500\",\n    eyebrow: \"Something went wrong\",\n    title: \"An unexpected error occurred\",\n    description:\n      \"Our team has been notified and is looking into it. Try again in a moment — your work is safe.\",\n    icon: AlertTriangle,\n    color: \"error\",\n  },\n  maintenance: {\n    code: \"Back soon\",\n    eyebrow: \"Scheduled maintenance\",\n    title: \"We’re making things better\",\n    description:\n      \"Nexus ReGen is briefly offline for planned maintenance. We’ll be back shortly — thanks for your patience.\",\n    icon: Tool01,\n    color: \"warning\",\n  },\n  \"access-denied\": {\n    code: \"403\",\n    eyebrow: \"Access denied\",\n    title: \"You don’t have permission to view this\",\n    description:\n      \"Your account can’t access this page. Ask an organisation admin for access, or switch to a workspace you belong to.\",\n    icon: Lock01,\n    color: \"gray\",\n  },\n}\n\ntype Cta = { label: string; href: string }\n\ninterface ErrorPageProps {\n  variant?: Variant\n  /** Override the big display code (e.g. \"404\", \"Back soon\"). */\n  code?: React.ReactNode\n  eyebrow?: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  primaryCta?: Cta | null\n  secondaryCta?: Cta | null\n  /** Optional search box (or any node) slotted below the copy. */\n  search?: React.ReactNode\n  /** Swap the featured icon. */\n  icon?: React.ComponentType<{ className?: string }>\n  /** Render the decorative section backdrop (default true). */\n  backdrop?: boolean\n  /** Constrain to the caller's box instead of the viewport height. */\n  fullScreen?: boolean\n  className?: string\n}\n\nfunction ErrorPage({\n  variant = \"404\",\n  code,\n  eyebrow,\n  title,\n  description,\n  primaryCta = { label: \"Back to home\", href: \"/\" },\n  secondaryCta,\n  search,\n  icon,\n  backdrop = true,\n  fullScreen = true,\n  className,\n}: ErrorPageProps) {\n  const preset = PRESETS[variant]\n  const Icon = icon ?? preset.icon\n\n  return (\n    <section\n      data-slot=\"error-page\"\n      data-variant={variant}\n      className={cn(\n        \"relative isolate flex flex-col items-center justify-center overflow-hidden bg-bg-primary px-4 py-20 text-center md:py-28\",\n        fullScreen && \"min-h-screen\",\n        className\n      )}\n    >\n      {backdrop ? <Backdrop placement=\"hero\" /> : null}\n\n      <div className=\"relative flex w-full max-w-xl flex-col items-center gap-6\">\n        <FeaturedIcon icon={Icon} color={preset.color} theme=\"modern\" size=\"xl\" />\n\n        <span className=\"text-display-lg font-semibold tracking-tight text-text-brand-primary tabular-nums md:text-display-2xl\">\n          {code ?? preset.code}\n        </span>\n\n        <div className=\"flex flex-col items-center gap-3\">\n          <Eyebrow>{eyebrow ?? preset.eyebrow}</Eyebrow>\n          <h1 className=\"text-display-xs font-semibold tracking-tight text-text-primary text-balance md:text-display-sm\">\n            {title ?? preset.title}\n          </h1>\n          <p className=\"max-w-md text-lg text-text-tertiary\">\n            {description ?? preset.description}\n          </p>\n        </div>\n\n        {search ? <div className=\"w-full max-w-md\">{search}</div> : null}\n\n        {primaryCta || secondaryCta ? (\n          <div className=\"mt-2 flex flex-col gap-3 sm:flex-row\">\n            {secondaryCta ? (\n              <Button\n                variant=\"secondary\"\n                size=\"lg\"\n                nativeButton={false}\n                render={<a href={secondaryCta.href} />}\n              >\n                <ArrowLeft data-icon />\n                <span data-text>{secondaryCta.label}</span>\n              </Button>\n            ) : null}\n            {primaryCta ? (\n              <Button\n                size=\"lg\"\n                className=\"cta-arrow\"\n                nativeButton={false}\n                render={<a href={primaryCta.href} />}\n              >\n                <span data-text>{primaryCta.label}</span>\n                <ArrowRight data-icon />\n              </Button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </section>\n  )\n}\n\nexport { ErrorPage }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/error-page.tsx"
    }
  ],
  "type": "registry:block"
}