{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error-4",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/error-4.tsx",
      "content": "\"use client\";\n\nimport type { FC } from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface NotFoundContentProps {\n  heading: string;\n  description: string;\n}\n\nconst NotFoundContent: FC<NotFoundContentProps> = ({\n  heading,\n  description,\n}) => (\n  <div className=\"space-y-2 text-center\">\n    <h1 className=\"text-foreground text-3xl font-semibold tracking-tight sm:text-4xl\">\n      {heading}\n    </h1>\n    <p className=\"text-muted-foreground mx-auto max-w-xs text-sm leading-relaxed sm:text-base\">\n      {description}\n    </p>\n  </div>\n);\n\ninterface NotFoundActionsProps {\n  primaryLabel: string;\n  secondaryLabel: string;\n  onPrimary: () => void;\n  onSecondary: () => void;\n}\n\nconst NotFoundActions: FC<NotFoundActionsProps> = ({\n  primaryLabel,\n  secondaryLabel,\n  onPrimary,\n  onSecondary,\n}) => (\n  <div className=\"flex flex-col items-center justify-center gap-3 sm:flex-row\">\n    <Button\n      onClick={onPrimary}\n      className=\"w-full rounded 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      {primaryLabel}\n    </Button>\n    <Button\n      variant=\"secondary\"\n      onClick={onSecondary}\n      className=\"w-full rounded 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.2)]\"\n    >\n      {secondaryLabel}\n    </Button>\n  </div>\n);\n\ninterface NotFoundPageProps {\n  heading?: string;\n  description?: string;\n  primaryActionLabel?: string;\n  secondaryActionLabel?: string;\n  errorCode?: string;\n  errorLabel?: string;\n  onPrimaryAction?: () => void;\n  onSecondaryAction?: () => void;\n}\n\nconst NotFoundPage: FC<NotFoundPageProps> = ({\n  heading = \"Route not found\",\n  description = \"The destination you're looking for has been moved, renamed, or no longer exists. It may have been relocated during a recent update.\",\n  primaryActionLabel = \"Return to dashboard\",\n  secondaryActionLabel = \"Report this issue\",\n  onPrimaryAction = () => window.history.back(),\n  onSecondaryAction = () => {},\n}) => (\n  <div className=\"bg-background relative flex min-h-screen items-center justify-center overflow-hidden px-6 py-12\">\n    <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden select-none\">\n      <svg\n        viewBox=\"0 0 800 400\"\n        className=\"text-muted-foreground w-full max-w-2xl -translate-y-6 opacity-15 dark:opacity-20\"\n      >\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          fill=\"transparent\"\n          stroke=\"currentColor\"\n          strokeOpacity={1}\n          strokeWidth={2}\n          strokeDasharray=\"12 8\"\n          className=\"font-bold tracking-wider\"\n          style={{\n            fontFamily: \"Helvetica\",\n            fontSize: \"24rem\",\n            fontWeight: \"bold\",\n          }}\n        >\n          404\n        </text>\n      </svg>\n    </div>\n\n    <div className=\"relative z-10 flex max-w-md flex-col items-center gap-8\">\n      <NotFoundContent heading={heading} description={description} />\n\n      <NotFoundActions\n        primaryLabel={primaryActionLabel}\n        secondaryLabel={secondaryActionLabel}\n        onPrimary={onPrimaryAction}\n        onSecondary={onSecondaryAction}\n      />\n    </div>\n  </div>\n);\n\nexport { NotFoundPage };\n",
      "type": "registry:ui",
      "target": "components/ui/error-4.tsx"
    }
  ],
  "type": "registry:ui"
}