{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-6",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/error-6.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { FaArrowRight } from \"react-icons/fa6\";\n\ninterface ErrorHeroProps {\n  code?: string;\n  title?: string;\n  description?: string;\n  buttonLabel?: string;\n}\n\nfunction BackgroundGrid() {\n  return (\n    <div className=\"mask-size-2xl mask-radial-from-muted absolute inset-0 z-0 overflow-hidden rounded-lg mask-radial-to-transparent mask-radial-at-center\">\n      <div className=\"grid h-full w-full grid-cols-12 grid-rows-6\">\n        {Array.from({ length: 72 }).map((_, index) => (\n          <div\n            key={index}\n            className=\"border-border/50 hover:bg-primary/20 border transition-colors duration-300\"\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction ErrorContent({\n  title,\n  description,\n  buttonLabel,\n}: Omit<ErrorHeroProps, \"code\">) {\n  return (\n    <div className=\"pointer-events-none relative z-0 flex max-w-md flex-col items-center justify-center gap-5 text-center sm:items-start sm:text-start\">\n      <div className=\"space-y-1\">\n        <h1 className=\"text-foreground text-4xl leading-tight font-bold tracking-tight sm:text-5xl\">\n          {title}\n        </h1>\n\n        <p className=\"text-muted-foreground max-w-sm text-sm leading-normal sm:text-base\">\n          {description}\n        </p>\n      </div>\n\n      <Button\n        className=\"group pointer-events-auto rounded px-5 shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.7),inset_0_-2px_4px_0_rgba(0,0,0,0.2)] dark:shadow-[inset_0_-2px_4px_0_rgba(0,0,0,0.2),inset_0_2px_4px_0_rgba(255,255,255,0.5)]\"\n        size=\"lg\"\n      >\n        <span>{buttonLabel}</span>\n\n        <span className=\"flex items-center justify-center transition-transform duration-200 group-hover:translate-x-1\">\n          <FaArrowRight className=\"size-4 fill-current\" />\n        </span>\n      </Button>\n    </div>\n  );\n}\n\nfunction ErrorCode({ code }: Pick<ErrorHeroProps, \"code\">) {\n  return (\n    <div className=\"pointer-events-none relative z-10 flex items-center justify-center\">\n      <span className=\"text-foreground/70 translate-y-10 text-[7rem] leading-none font-light tracking-tight select-none sm:translate-y-0 sm:text-[9rem] md:text-[11rem] lg:text-[13rem]\">\n        {code}\n      </span>\n    </div>\n  );\n}\n\nexport default function SystemErrorPanel({\n  code = \"404\",\n  title = \"This destination isn’t accessible.\",\n  description = \"The resource you attempted to open may have been moved, archived, or temporarily disconnected from the network.\",\n  buttonLabel = \"Return to Dashboard\",\n}: ErrorHeroProps) {\n  return (\n    <div className=\"p-4 h-full \">\n      <Card className=\"bg-muted mx-auto  relative overflow-hidden rounded-4xl px-4 sm:px-8 lg:px-14  w-full\">\n        <BackgroundGrid />\n\n        <div className=\"pointer-events-none relative z-10 grid min-h-[420px] grid-cols-1 gap-10 sm:grid-cols-2 sm:items-center\">\n          <div className=\"order-2 sm:order-1\">\n            <ErrorContent\n              title={title}\n              description={description}\n              buttonLabel={buttonLabel}\n            />\n          </div>\n\n          <div className=\"order-1 sm:order-2\">\n            <ErrorCode code={code} />\n          </div>\n        </div>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/error-6.tsx"
    }
  ],
  "type": "registry:ui"
}