{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-01",
  "type": "registry:block",
  "title": "Checkout 01",
  "files": [
    {
      "path": "src/components/commercn/checkouts/checkout-01.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport {\n\tField,\n\tFieldGroup,\n\tFieldLabel,\n\tFieldLegend,\n\tFieldSet,\n} from \"@/components/ui/field\";\nimport { Label } from \"@/components/ui/label\";\nimport { useState } from \"react\";\n\nexport function CheckoutOne() {\n\tconst [shippingMethod, setShippingMethod] = useState<\"home\" | \"pickup\">(\n\t\t\"home\",\n\t);\n\n\treturn (\n\t\t<div className=\"w-full max-w-6xl flex flex-col md:flex-row justify-between items-start gap-8\">\n\t\t\t<div className=\"w-full order-2 md:order-1\">\n\t\t\t\t{/* <CardContent> */}\n\t\t\t\t\t<form>\n\t\t\t\t\t\t<FieldGroup>\n\t\t\t\t\t\t\t<FieldSet>\n\t\t\t\t\t\t\t\t<FieldLegend>Shipping address</FieldLegend>\n\t\t\t\t\t\t\t\t<FieldGroup className=\"gap-4\">\n\t\t\t\t\t\t\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"first-name\">First name</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Input id=\"first-name\" />\n\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"last-name\">Last name</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Input id=\"last-name\" />\n\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"email\">Email</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\t\tid=\"email\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"street-address\">\n\t\t\t\t\t\t\t\t\t\t\tStreet Address\n\t\t\t\t\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t<Input id=\"street-address\" />\n\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"city\">City</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Input id=\"city\" />\n\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"state\">State</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Select>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger id=\"state\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectValue placeholder=\"Select state\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"ca\">California</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"ny\">New York</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"tx\">Texas</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"fl\">Florida</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"country\">Country</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Input id=\"country\" />\n\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t\t<Field>\n\t\t\t\t\t\t\t\t\t\t\t<FieldLabel htmlFor=\"zip\">ZIP code</FieldLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Input id=\"zip\" />\n\t\t\t\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</FieldGroup>\n\t\t\t\t\t\t\t</FieldSet>\n\t\t\t\t\t\t\t<FieldSet>\n\t\t\t\t\t\t\t\t<FieldLegend>Shipping method</FieldLegend>\n\t\t\t\t\t\t\t\t<RadioGroup\n\t\t\t\t\t\t\t\t\tdefaultValue=\"home\"\n\t\t\t\t\t\t\t\t\tonValueChange={(value) =>\n\t\t\t\t\t\t\t\t\t\tsetShippingMethod(value as \"home\" | \"pickup\")\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName=\"flex flex-col lg:flex-row gap-4\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={`flex flex-1 items-center space-x-3 p-3 rounded-lg border transition-colors ${shippingMethod === \"home\"\n\t\t\t\t\t\t\t\t\t\t\t? \"border-gray-500 bg-gray-50\"\n\t\t\t\t\t\t\t\t\t\t\t: \"border-gray-200 hover:border-gray-300\"\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<RadioGroupItem value=\"home\" id=\"home\" />\n\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"home\" className=\"cursor-pointer flex-col items-start flex-1\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"font-medium\">Home delivery</div>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\tTakes 3-5 business days\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={`flex flex-1 items-center space-x-3 p-3 rounded-lg border transition-colors ${shippingMethod === \"pickup\"\n\t\t\t\t\t\t\t\t\t\t\t? \"border-gray-500 bg-gray-50\"\n\t\t\t\t\t\t\t\t\t\t\t: \"border-gray-200 hover:border-gray-300\"\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<RadioGroupItem value=\"pickup\" id=\"pickup\" />\n\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"pickup\" className=\"cursor-pointer flex-col items-start flex-1\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"font-medium\">In-store pickup</div>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\tPick from store location\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</RadioGroup>\n\t\t\t\t\t\t\t</FieldSet>\n\t\t\t\t\t\t\t<Field orientation=\"horizontal\">\n\t\t\t\t\t\t\t\t<Button className=\"w-full h-12 bg-black text-white hover:bg-gray-800\">\n\t\t\t\t\t\t\t\t\tContinue to Payment\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</Field>\n\t\t\t\t\t\t</FieldGroup>\n\t\t\t\t\t</form>\n\t\t\t\t{/* </CardContent> */}\n\t\t\t</div>\n\n\t\t\t<div className=\"w-full max-w-[400px] bg-gray-50 border p-4 rounded-xl order-1 md:order-2\">\n\t\t\t\t<h4 className=\"text-lg font-medium mb-6\">Order Summary</h4>\n\n\t\t\t\t<ul className=\"space-y-2\">\n\t\t\t\t\t<li className=\"flex justify-between\">\n\t\t\t\t\t\t<h5 className=\"text-sm\">Vintage Denim Jacket</h5>\n\t\t\t\t\t\t<p className=\"font-medium\">1 x $129.00</p>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"flex justify-between\">\n\t\t\t\t\t\t<h5 className=\"text-sm\">Handmade Leather Wallet</h5>\n\t\t\t\t\t\t<p className=\"font-medium\">1 x $39.00</p>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<hr className=\"my-4\" />\n\n\t\t\t\t\t<li className=\"flex justify-between\">\n\t\t\t\t\t\t<h5 className=\"text-sm\">Subtotal</h5>\n\t\t\t\t\t\t<p className=\"font-medium\">$168.00</p>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"flex justify-between\">\n\t\t\t\t\t\t<h5 className=\"text-sm\">Shipping</h5>\n\t\t\t\t\t\t<p className=\"font-medium\">${shippingMethod === \"home\" ? 10 : 0}</p>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"flex justify-between\">\n\t\t\t\t\t\t<h5 className=\"text-sm\">Tax</h5>\n\t\t\t\t\t\t<p className=\"font-medium\">$12.00</p>\n\t\t\t\t\t</li>\n\n\t\t\t\t\t<hr className=\"my-4\" />\n\t\t\t\t\t<li className=\"flex justify-between\">\n\t\t\t\t\t\t<h5 className=\"text-lg font-medium\">Total</h5>\n\t\t\t\t\t\t<p className=\"text-xl font-medium\">${(168 + (shippingMethod === \"home\" ? 10 : 0)).toFixed(2)}</p>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n\n\n// function CartItem()",
      "type": "registry:component"
    }
  ]
}