{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-information-01",
  "type": "registry:block",
  "description": "Manage billing contacts and company information",
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/billing-information-01/page.tsx",
      "content": "\"use client\"\n\nimport { Building2, Pencil, Plus, Trash2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\ninterface BillingCardProps {\n  company: string\n  contact: string\n  email: string\n  vat: string\n}\n\nfunction BillingCard({ company, contact, email, vat }: BillingCardProps) {\n  return (\n    <Card className=\"border\">\n      <div className=\"flex flex-wrap items-start justify-between gap-4 p-4\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"bg-background grid h-12 w-12 shrink-0 place-items-center rounded border\">\n            <Building2 className=\"h-6 w-6\" />\n          </div>\n          <div className=\"space-y-1\">\n            <p className=\"text-sm font-semibold\">{company}</p>\n            <p className=\"text-muted-foreground text-sm\">Company</p>\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"ghost\">\n            <Pencil className=\"mr-2 h-4 w-4\" />\n            Edit\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"text-destructive hover:text-destructive\"\n          >\n            <Trash2 className=\"mr-2 h-4 w-4\" />\n            Delete\n          </Button>\n        </div>\n      </div>\n      <div className=\"space-y-2 px-4 pt-2 pb-4\">\n        <div className=\"text-sm\">\n          <span className=\"text-muted-foreground font-semibold\">Contact: </span>\n          <span className=\"font-medium\">{contact}</span>\n        </div>\n        <div className=\"text-sm\">\n          <span className=\"text-muted-foreground font-semibold\">\n            Email Address:{\" \"}\n          </span>\n          <span className=\"font-medium\">{email}</span>\n        </div>\n        <div className=\"text-sm\">\n          <span className=\"text-muted-foreground font-semibold\">\n            VAT Number:{\" \"}\n          </span>\n          <span className=\"font-medium\">{vat}</span>\n        </div>\n      </div>\n    </Card>\n  )\n}\n\nexport default function BillingInformation01() {\n  return (\n    <div className=\"mx-auto max-w-3xl p-6\">\n      <div className=\"flex flex-col items-start justify-between gap-4 sm:flex-row\">\n        <div>\n          <h2 className=\"font-semibold\">Billing Information</h2>\n          <p className=\"text-muted-foreground text-sm\">\n            View and update your billing details quickly and easily.\n          </p>\n        </div>\n        <Button variant=\"outline\" className=\"w-full sm:w-auto\">\n          <Plus className=\"mr-2 h-4 w-4\" /> Add New Billing\n        </Button>\n      </div>\n      <div className=\"mt-6 space-y-4\">\n        <BillingCard\n          company=\"Burrito Vikings\"\n          contact=\"Emma Roberts\"\n          email=\"emma@mail.com\"\n          vat=\"FRB1235476\"\n        />\n        <BillingCard\n          company=\"Stone Tech Zone\"\n          contact=\"Marcel Glock\"\n          email=\"marcel@mail.com\"\n          vat=\"FRB1235476\"\n        />\n        <BillingCard\n          company=\"Fiber Notion\"\n          contact=\"Misha Stam\"\n          email=\"misha@mail.com\"\n          vat=\"FRB1235476\"\n        />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/billing-information/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "700px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component",
    "details": "Easily manage billing contacts and information associated with different companies within one platform. Built with shadcn/ui Card and Button components for a clean, accessible interface. Perfect for multi-company billing management, enterprise dashboards, and SaaS platforms requiring organized billing contact management."
  },
  "categories": [
    "billing"
  ]
}