{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-empty-18","type":"registry:block","title":"No payments empty state with credit card illustration","description":"No payments empty state with credit card illustration","dependencies":[],"registryDependencies":["button","empty"],"files":[{"path":"c-empty-18.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 CreditCardIllustration() {\n  return (\n    <svg\n      width=\"200\"\n      height=\"130\"\n      viewBox=\"0 0 200 130\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      {/* Shadow card behind */}\n      <rect\n        x=\"48\"\n        y=\"12\"\n        width=\"120\"\n        height=\"78\"\n        rx=\"10\"\n        className=\"fill-muted/50 dark:fill-muted/25\"\n        transform=\"rotate(6 108 51)\"\n      />\n\n      {/* Main card */}\n      <rect\n        x=\"36\"\n        y=\"18\"\n        width=\"128\"\n        height=\"82\"\n        rx=\"10\"\n        className=\"fill-background stroke-border\"\n        strokeWidth=\"1.5\"\n      />\n\n      {/* Chip */}\n      <rect\n        x=\"52\"\n        y=\"38\"\n        width=\"22\"\n        height=\"16\"\n        rx=\"3\"\n        className=\"fill-muted-foreground/15 stroke-muted-foreground/20\"\n        strokeWidth=\"1\"\n      />\n      {/* Chip lines */}\n      <line\n        x1=\"52\"\n        y1=\"46\"\n        x2=\"74\"\n        y2=\"46\"\n        className=\"stroke-muted-foreground/15\"\n        strokeWidth=\"0.8\"\n      />\n      <line\n        x1=\"63\"\n        y1=\"38\"\n        x2=\"63\"\n        y2=\"54\"\n        className=\"stroke-muted-foreground/15\"\n        strokeWidth=\"0.8\"\n      />\n\n      {/* Contactless icon */}\n      <g className=\"stroke-muted-foreground/20\" strokeWidth=\"1.5\" fill=\"none\">\n        <path d=\"M84 42 Q87 46 84 50\" strokeLinecap=\"round\" />\n        <path d=\"M88 40 Q92 46 88 52\" strokeLinecap=\"round\" />\n        <path d=\"M92 38 Q97 46 92 54\" strokeLinecap=\"round\" />\n      </g>\n\n      {/* Card number dots */}\n      <g className=\"fill-muted-foreground/20\">\n        <circle cx=\"56\" cy=\"68\" r=\"2\" />\n        <circle cx=\"64\" cy=\"68\" r=\"2\" />\n        <circle cx=\"72\" cy=\"68\" r=\"2\" />\n        <circle cx=\"80\" cy=\"68\" r=\"2\" />\n      </g>\n      <g className=\"fill-muted-foreground/15\">\n        <circle cx=\"94\" cy=\"68\" r=\"2\" />\n        <circle cx=\"102\" cy=\"68\" r=\"2\" />\n        <circle cx=\"110\" cy=\"68\" r=\"2\" />\n        <circle cx=\"118\" cy=\"68\" r=\"2\" />\n      </g>\n\n      {/* Bottom info lines */}\n      <rect\n        x=\"52\"\n        y=\"80\"\n        width=\"40\"\n        height=\"3\"\n        rx=\"1.5\"\n        className=\"fill-muted-foreground/12\"\n      />\n      <rect\n        x=\"120\"\n        y=\"80\"\n        width=\"28\"\n        height=\"3\"\n        rx=\"1.5\"\n        className=\"fill-muted-foreground/12\"\n      />\n\n      {/* Card network logo placeholder */}\n      <circle cx=\"140\" cy=\"88\" r=\"6\" className=\"fill-muted-foreground/8\" />\n      <circle cx=\"150\" cy=\"88\" r=\"6\" className=\"fill-muted-foreground/12\" />\n\n      {/* Floating decorative elements */}\n      <circle cx=\"26\" cy=\"50\" r=\"3\" className=\"fill-primary/10\" />\n      <circle cx=\"180\" cy=\"40\" r=\"2\" className=\"fill-primary/10\" />\n      <path\n        d=\"M174 70 L178 66 L178 74 Z\"\n        className=\"fill-muted-foreground/10\"\n      />\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            <CreditCardIllustration />\n          </EmptyMedia>\n          <EmptyTitle>No payment methods</EmptyTitle>\n          <EmptyDescription>\n            Add a payment method to start making transactions securely.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Add payment method</Button>\n        </EmptyContent>\n      </Empty>\n    </div>\n  )\n}","target":"components/examples/c-empty-18.tsx"}],"meta":{"order":18}}