{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-1",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/error-1.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport type { ReactNode } from \"react\";\nimport { RiHome5Fill } from \"react-icons/ri\";\n\nexport interface ErrorOneAction {\n  label: string;\n  icon?: ReactNode;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface ErrorOneProps {\n  /** The HTTP error code to display prominently, e.g. \"404\" */\n  code?: string;\n  /** Bold headline beneath the error code */\n  title?: string;\n  /** Supporting description copy */\n  description?: string;\n  /** Primary call-to-action */\n  action?: ErrorOneAction;\n}\n\n// ─── Sub-components ─────────────────────────────────────────────────────────\n\nfunction GradientCode({ code }: { code: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 800 300\"\n      className=\"w-full max-w-[20rem] select-none sm:max-w-md\"\n      aria-hidden=\"true\"\n    >\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        className=\"fill-primary/20 stroke-primary font-black tracking-tighter\"\n        style={{ fontSize: \"20rem\" }}\n        strokeWidth=\"2\"\n        strokeDasharray=\"40 20\"\n      >\n        {code}\n      </text>\n    </svg>\n  );\n}\n\nfunction PillButton({ label, icon, href, onClick }: ErrorOneAction) {\n  const cls =\n    \"h-10 rounded-full px-6 text-sm font-semibold rounded transition-opacity hover:opacity-90 mt-4 shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.7),inset_0_-2px_4px_0_rgba(0,0,0,0.2)] sm:w-auto 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\n  const content = (\n    <>\n      <span>{label}</span>\n      {icon}\n    </>\n  );\n\n  if (href) {\n    return (\n      <Button asChild className={cls}>\n        <a href={href}>{content}</a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button className={cls} onClick={onClick} type=\"button\">\n      {content}\n    </Button>\n  );\n}\n\nexport function ErrorOne({\n  code = \"404\",\n  title = \"No, no, that's right.\",\n  description = \"This is a 404 page. And this page exists, no matter what anyone says.\",\n  action = defaultErrorOneAction,\n}: ErrorOneProps) {\n  return (\n    <main className=\"theme-injected bg-background text-foreground relative flex min-h-screen items-center justify-center px-6 py-16\">\n      <div\n        className=\"dakr:opacity-20 mask-radia-at-center mask-radial-from-muted pointer-events-none absolute inset-0 z-0 mask-radial-to-transparent opacity-10\"\n        style={{\n          backgroundImage: `\n        repeating-linear-gradient(0deg, transparent, transparent 19px, var(--primary) 19px, var(--primary) 20px, transparent 20px, transparent 39px, var(--primary) 39px, var(--primary) 40px),\n        repeating-linear-gradient(90deg, transparent, transparent 19px, var(--primary) 19px, var(--primary) 20px, transparent 20px, transparent 39px, var(--primary) 39px, var(--primary) 40px),\n        radial-gradient(circle at 20px 20px, var(--primary) 2px, transparent 2px),\n        radial-gradient(circle at 40px 40px, var(--primary) 2px, transparent 2px)\n      `,\n          backgroundSize: \"40px 40px, 40px 40px, 40px 40px, 40px 40px\",\n        }}\n      />\n\n      <section\n        aria-labelledby=\"error-one-title\"\n        className=\"z-10 mx-auto flex w-full max-w-lg flex-col items-center text-center\"\n      >\n        <GradientCode code={code} />\n\n        <div className=\"flex flex-col items-center gap-2\">\n          <h1\n            id=\"error-one-title\"\n            className=\"text-xl leading-snug font-bold tracking-tight sm:text-2xl\"\n          >\n            {title}\n          </h1>\n          <p className=\"text-muted-foreground mx-auto max-w-xs text-sm leading-relaxed sm:max-w-sm sm:text-base\">\n            {description}\n          </p>\n        </div>\n        <PillButton {...action} />\n      </section>\n    </main>\n  );\n}\n\nexport const defaultErrorOneAction: ErrorOneAction = {\n  label: \"Go Back Home\",\n  href: \"/\",\n  icon: <RiHome5Fill className=\"ml-1.5 text-base\" aria-hidden=\"true\" />,\n};\n\nexport default ErrorOne;\n",
      "type": "registry:ui",
      "target": "components/ui/error-1.tsx"
    }
  ],
  "type": "registry:ui"
}