{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-01",
  "type": "registry:block",
  "description": "Checkout form with order summary",
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label",
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/checkout-01/page.tsx",
      "content": "\"use client\"\n\nimport {\n  CreditCard,\n  Lock,\n  Mail,\n  MapPin,\n  Package,\n  ShoppingBag,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst OPTIONS = [\n  {\n    image: \"https://v3.material-tailwind.com/coat-1.png\",\n    title: \"Classic Suit\",\n    description: \"Silk\",\n    size: \"M\",\n    price: \"$1,300\",\n    quantity: 1,\n  },\n  {\n    image: \"https://v3.material-tailwind.com/coat-2.png\",\n    title: \"Premium Suit\",\n    description: \"Linen\",\n    size: \"M\",\n    price: \"$790\",\n    quantity: 1,\n  },\n]\n\nconst PRICE_OPTIONS = [\n  { value: \"Subtotal\", price: \"$2,090\" },\n  { value: \"Shipping estimate\", price: \"$0\" },\n  { value: \"Tax estimate\", price: \"$5\" },\n]\n\nexport default function Checkout01() {\n  return (\n    <section className=\"container mx-auto px-4 py-12\">\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"mb-8\">\n          <h1 className=\"text-3xl font-bold\">Checkout</h1>\n          <p className=\"text-muted-foreground mt-2\">\n            Complete your order by providing your payment details\n          </p>\n        </div>\n\n        <div className=\"rounded-2xl border bg-white p-6 shadow-lg md:p-8 lg:p-12 dark:bg-gray-950\">\n          <div className=\"grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16\">\n            <div className=\"space-y-8\">\n              <div className=\"space-y-6\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                    <Mail className=\"text-primary h-5 w-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-lg font-semibold\">Contact</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      We'll send order updates here\n                    </p>\n                  </div>\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"email\">Email Address</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"you@example.com\"\n                    className=\"h-11\"\n                  />\n                </div>\n                <div className=\"flex items-start gap-2\">\n                  <Checkbox id=\"terms\" className=\"mt-1\" />\n                  <Label\n                    htmlFor=\"terms\"\n                    className=\"text-muted-foreground text-sm leading-relaxed\"\n                  >\n                    I agree to the{\" \"}\n                    <a href=\"#\" className=\"text-primary hover:underline\">\n                      Terms & Conditions\n                    </a>{\" \"}\n                    and{\" \"}\n                    <a href=\"#\" className=\"text-primary hover:underline\">\n                      Privacy Policy\n                    </a>\n                  </Label>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div className=\"space-y-6\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                    <MapPin className=\"text-primary h-5 w-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-lg font-semibold\">Shipping Address</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Where should we deliver your order?\n                    </p>\n                  </div>\n                </div>\n                <div className=\"space-y-4\">\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"address\">Street Address</Label>\n                    <Input\n                      id=\"address\"\n                      placeholder=\"123 Main Street\"\n                      className=\"h-11\"\n                    />\n                  </div>\n                  <div className=\"grid gap-4 sm:grid-cols-3\">\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"city\">City</Label>\n                      <Input\n                        id=\"city\"\n                        placeholder=\"New York\"\n                        className=\"h-11\"\n                      />\n                    </div>\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"postal\">Postal Code</Label>\n                      <Input id=\"postal\" placeholder=\"10001\" className=\"h-11\" />\n                    </div>\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"country\">Country</Label>\n                      <Input id=\"country\" placeholder=\"USA\" className=\"h-11\" />\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div className=\"space-y-6\">\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                    <CreditCard className=\"text-primary h-5 w-5\" />\n                  </div>\n                  <div className=\"flex-1\">\n                    <h3 className=\"text-lg font-semibold\">Payment Details</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Your payment information is secure\n                    </p>\n                  </div>\n                  <Badge\n                    variant=\"outline\"\n                    className=\"gap-1 border-green-500/30 bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400\"\n                  >\n                    <Lock className=\"h-3 w-3\" />\n                    Secure\n                  </Badge>\n                </div>\n                <div className=\"space-y-4\">\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"card\">Card Number</Label>\n                    <Input\n                      id=\"card\"\n                      placeholder=\"1234 5678 9012 3456\"\n                      className=\"h-11\"\n                    />\n                  </div>\n                  <div className=\"grid gap-4 sm:grid-cols-2\">\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"expiry\">Expiration Date</Label>\n                      <Input id=\"expiry\" placeholder=\"MM/YY\" className=\"h-11\" />\n                    </div>\n                    <div className=\"space-y-2\">\n                      <Label htmlFor=\"cvv\">CVV</Label>\n                      <Input id=\"cvv\" placeholder=\"123\" className=\"h-11\" />\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <Button className=\"mt-4 h-12 w-full text-base\" size=\"lg\">\n                <Lock className=\"mr-2 h-4 w-4\" />\n                Place Order - $2,095\n              </Button>\n            </div>\n\n            <div className=\"lg:sticky lg:top-8 lg:h-fit\">\n              <div className=\"bg-muted/30 rounded-xl border p-6\">\n                <div className=\"mb-6 flex items-center gap-3\">\n                  <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                    <ShoppingBag className=\"text-primary h-5 w-5\" />\n                  </div>\n                  <h2 className=\"text-xl font-bold\">Order Summary</h2>\n                </div>\n\n                <div className=\"space-y-4\">\n                  {OPTIONS.map(\n                    (\n                      { image, title, description, size, price, quantity },\n                      index\n                    ) => (\n                      <div\n                        key={index}\n                        className=\"bg-background hover:bg-muted/50 flex items-start gap-4 rounded-lg border p-3 transition-colors\"\n                      >\n                        <div className=\"relative h-20 w-20 overflow-hidden rounded-md border\">\n                          <img\n                            src={image}\n                            alt={title}\n                            className=\"h-full w-full object-cover p-1\"\n                          />\n                        </div>\n                        <div className=\"flex-1 space-y-1\">\n                          <p className=\"leading-tight font-semibold\">{title}</p>\n                          <p className=\"text-muted-foreground text-sm\">\n                            {description} · Size {size}\n                          </p>\n                          <p className=\"text-muted-foreground text-xs\">\n                            Qty: {quantity}\n                          </p>\n                        </div>\n                        <p className=\"font-semibold\">{price}</p>\n                      </div>\n                    )\n                  )}\n                </div>\n\n                <Separator className=\"my-6\" />\n\n                <div className=\"space-y-3\">\n                  {PRICE_OPTIONS.map(({ value, price }) => (\n                    <div key={value} className=\"flex justify-between text-sm\">\n                      <span className=\"text-muted-foreground\">{value}</span>\n                      <span className=\"font-medium\">{price}</span>\n                    </div>\n                  ))}\n                </div>\n\n                <Separator className=\"my-4\" />\n\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-lg font-bold\">Total</span>\n                  <span className=\"text-2xl font-bold\">$2,095</span>\n                </div>\n\n                <div className=\"bg-muted/50 mt-6 flex items-start gap-2 rounded-lg p-4\">\n                  <Package className=\"text-primary mt-0.5 h-5 w-5 shrink-0\" />\n                  <div className=\"space-y-1\">\n                    <p className=\"text-sm font-medium\">Free Shipping</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Your order qualifies for free standard shipping\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/checkout/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1200px",
    "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"
  },
  "categories": [
    "ecommerce"
  ]
}