{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-states-4",
  "title": "Failed Load Error",
  "description": "Error empty state for data that failed to load, with a destructive alert icon plus Try Again and contact support actions.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "empty",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/empty-states/4/empty-states-block.tsx",
      "content": "\"use client\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function EmptyStatesBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <Toaster />\n      <div className=\"w-full max-w-md rounded-lg border border-border bg-card\">\n        <Empty className=\"border-0\">\n          <EmptyHeader>\n            <EmptyMedia\n              variant=\"icon\"\n              className=\"bg-destructive/10 text-destructive\"\n            >\n              <IconPlaceholder\n                lucide=\"CircleAlert\"\n                tabler=\"IconAlertCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"WarningCircle\"\n                remixicon=\"RiErrorWarningLine\"\n                className=\"size-4\"\n              />\n            </EmptyMedia>\n            <EmptyTitle>Something went wrong</EmptyTitle>\n            <EmptyDescription>\n              We hit an unexpected error while loading your data. Check your\n              connection and try again in a few moments.\n            </EmptyDescription>\n          </EmptyHeader>\n          <EmptyContent>\n            <div className=\"flex flex-col items-center gap-2 sm:flex-row\">\n              <Button\n                onClick={() =>\n                  toast.success(\"Retrying…\", {\n                    id: \"retrying\",\n                    description: \"Reloading your data.\",\n                  })\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"RefreshCw\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowsClockwise\"\n                  remixicon=\"RiRefreshLine\"\n                  data-icon=\"inline-start\"\n                />\n                Try Again\n              </Button>\n              <Button\n                variant=\"outline\"\n                onClick={() =>\n                  toast(\"Support\", {\n                    id: \"support\",\n                    description: \"Opening a support ticket.\",\n                  })\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"Headset\"\n                  tabler=\"IconHeadset\"\n                  hugeicons=\"CustomerSupportIcon\"\n                  phosphor=\"Headset\"\n                  remixicon=\"RiCustomerService2Line\"\n                  data-icon=\"inline-start\"\n                />\n                Contact Support\n              </Button>\n            </div>\n          </EmptyContent>\n        </Empty>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/empty-states-4.tsx"
    }
  ],
  "meta": {
    "height": "349px",
    "tier": "free"
  },
  "categories": [
    "empty-states"
  ],
  "type": "registry:block"
}