{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-empty-19","type":"registry:block","title":"No integrations empty state with connected nodes illustration","description":"No integrations empty state with connected nodes illustration","dependencies":[],"registryDependencies":["button","empty"],"files":[{"path":"c-empty-19.tsx","type":"registry:block","content":"import { Button } from \"@/components/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\n\nfunction NodesIllustration() {\n  return (\n    <svg\n      width=\"200\"\n      height=\"120\"\n      viewBox=\"0 0 200 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      {/* Connection lines */}\n      <line\n        x1=\"100\"\n        y1=\"60\"\n        x2=\"44\"\n        y2=\"30\"\n        className=\"stroke-border\"\n        strokeWidth=\"1.5\"\n        strokeDasharray=\"4 3\"\n      />\n      <line\n        x1=\"100\"\n        y1=\"60\"\n        x2=\"44\"\n        y2=\"90\"\n        className=\"stroke-border\"\n        strokeWidth=\"1.5\"\n        strokeDasharray=\"4 3\"\n      />\n      <line\n        x1=\"100\"\n        y1=\"60\"\n        x2=\"156\"\n        y2=\"30\"\n        className=\"stroke-border\"\n        strokeWidth=\"1.5\"\n        strokeDasharray=\"4 3\"\n      />\n      <line\n        x1=\"100\"\n        y1=\"60\"\n        x2=\"156\"\n        y2=\"90\"\n        className=\"stroke-border\"\n        strokeWidth=\"1.5\"\n        strokeDasharray=\"4 3\"\n      />\n\n      {/* Center node */}\n      <circle\n        cx=\"100\"\n        cy=\"60\"\n        r=\"18\"\n        className=\"fill-primary/10 dark:fill-primary/15 stroke-primary/40\"\n        strokeWidth=\"1.5\"\n      />\n      <circle cx=\"100\" cy=\"60\" r=\"6\" className=\"fill-primary/30\" />\n      <circle cx=\"100\" cy=\"60\" r=\"2.5\" className=\"fill-primary\" />\n\n      {/* Top-left node */}\n      <circle\n        cx=\"44\"\n        cy=\"30\"\n        r=\"14\"\n        className=\"fill-muted dark:fill-muted/60 stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n      <rect\n        x=\"37\"\n        y=\"26\"\n        width=\"14\"\n        height=\"3\"\n        rx=\"1.5\"\n        className=\"fill-muted-foreground/20\"\n      />\n      <rect\n        x=\"40\"\n        y=\"32\"\n        width=\"8\"\n        height=\"2\"\n        rx=\"1\"\n        className=\"fill-muted-foreground/12\"\n      />\n\n      {/* Bottom-left node */}\n      <circle\n        cx=\"44\"\n        cy=\"90\"\n        r=\"14\"\n        className=\"fill-muted dark:fill-muted/60 stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n      <rect\n        x=\"37\"\n        y=\"86\"\n        width=\"14\"\n        height=\"3\"\n        rx=\"1.5\"\n        className=\"fill-muted-foreground/20\"\n      />\n      <rect\n        x=\"40\"\n        y=\"92\"\n        width=\"8\"\n        height=\"2\"\n        rx=\"1\"\n        className=\"fill-muted-foreground/12\"\n      />\n\n      {/* Top-right node */}\n      <circle\n        cx=\"156\"\n        cy=\"30\"\n        r=\"14\"\n        className=\"fill-muted dark:fill-muted/60 stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n      <rect\n        x=\"149\"\n        y=\"26\"\n        width=\"14\"\n        height=\"3\"\n        rx=\"1.5\"\n        className=\"fill-muted-foreground/20\"\n      />\n      <rect\n        x=\"152\"\n        y=\"32\"\n        width=\"8\"\n        height=\"2\"\n        rx=\"1\"\n        className=\"fill-muted-foreground/12\"\n      />\n\n      {/* Bottom-right node */}\n      <circle\n        cx=\"156\"\n        cy=\"90\"\n        r=\"14\"\n        className=\"fill-muted dark:fill-muted/60 stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n      <rect\n        x=\"149\"\n        y=\"86\"\n        width=\"14\"\n        height=\"3\"\n        rx=\"1.5\"\n        className=\"fill-muted-foreground/20\"\n      />\n      <rect\n        x=\"152\"\n        y=\"92\"\n        width=\"8\"\n        height=\"2\"\n        rx=\"1\"\n        className=\"fill-muted-foreground/12\"\n      />\n\n      {/* Small floating dots */}\n      <circle cx=\"72\" cy=\"40\" r=\"2\" className=\"fill-primary/15\" />\n      <circle cx=\"128\" cy=\"80\" r=\"2\" className=\"fill-primary/15\" />\n      <circle cx=\"72\" cy=\"80\" r=\"1.5\" className=\"fill-muted-foreground/10\" />\n      <circle cx=\"128\" cy=\"40\" r=\"1.5\" className=\"fill-muted-foreground/10\" />\n    </svg>\n  )\n}\n\nexport function Pattern() {\n  return (\n    <div className=\"flex items-center justify-center p-4\">\n      <Empty className=\"py-12\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <NodesIllustration />\n          </EmptyMedia>\n          <EmptyTitle>No integrations</EmptyTitle>\n          <EmptyDescription>\n            Connect your tools and services to streamline your workflow.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button>Browse integrations</Button>\n            <Button variant=\"outline\">Learn more</Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </div>\n  )\n}","target":"components/examples/c-empty-19.tsx"}],"meta":{"order":19}}