{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-02",
  "type": "registry:block",
  "title": "Checkout 02",
  "files": [
    {
      "path": "src/components/commercn/checkouts/checkout-02.tsx",
      "content": "import { X, CreditCard, MapPin, Edit } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Card, CardContent, CardHeader, CardTitle, CardFooter } from \"@/components/ui/card\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\n\nconst cartItems = [\n    {\n        id: 1,\n        name: \"Headphones\",\n        price: 299,\n        image: \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&auto=format&fit=crop\",\n    },\n    {\n        id: 2,\n        name: \"Watch\",\n        price: 145.5,\n        image: \"https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200&auto=format&fit=crop\",\n    },\n];\n\nexport function CheckoutTwo() {\n    return (\n        <div className=\"w-full max-w-xl\">\n            <div className=\"flex flex-col gap-8\">\n                {/* Cart Section */}\n                <Card className=\"shadow-none rounded-2xl\">\n                    <CardContent>\n                        <div className=\"flex items-center justify-between mb-4\">\n                            <CardTitle className=\"font-semibold text-lg\">Cart ({cartItems.length})</CardTitle>\n                            <Button variant=\"ghost\" size=\"icon\">\n                                <Edit className=\"size-4\" />\n                            </Button>\n                        </div>\n                        <div className=\"flex gap-6\">\n                            {cartItems.map((item) => (\n                                <div key={item.id} className=\"flex flex-col gap-2 w-24\">\n                                    <div className=\"size-24 rounded-xl overflow-hidden\">\n                                        <img src={item.image} alt={item.name} className=\"size-full object-cover\" />\n                                    </div>\n                                    <span className=\"font-medium text-sm lg:text-base\">${item.price}</span>\n                                </div>\n                            ))}\n                        </div>\n                    </CardContent>\n                </Card>\n\n                {/* Delivery Section */}\n                <section>\n                    <div className=\"flex items-center gap-2 mb-6\">\n                        <MapPin className=\"size-4\" />\n                        <h3 className=\"font-semibold text-lg\">Delivery</h3>\n                    </div>\n                    <div className=\"grid grid-cols-2 gap-4 *:gap-1\">\n                        <Field>\n                            <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">First Name</FieldLabel>\n                            <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"John\" />\n                        </Field>\n                        <Field>\n                            <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">Last Name</FieldLabel>\n                            <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"Doe\" />\n                        </Field>\n                        <Field className=\"col-span-2\">\n                            <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">Address</FieldLabel>\n                            <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"123 Main St\" />\n                        </Field>\n                        <Field>\n                            <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">City</FieldLabel>\n                            <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"New York\" />\n                        </Field>\n                        <Field>\n                            <FieldLabel className=\"font-semibold text-xs uppercase tracking-wide\">Postcode</FieldLabel>\n                            <Input className=\"h-12 rounded-xl shadow-none\" placeholder=\"12345\" />\n                        </Field>\n                    </div>\n                </section>\n\n                {/* Payment Section */}\n                <section>\n                    <div className=\"flex items-center gap-2 mb-6\">\n                        <CreditCard className=\"size-4\" />\n                        <h3 className=\"font-semibold text-lg\">Payment</h3>\n                    </div>\n                    <div className=\"flex flex-col gap-4\">\n                        <div className=\"bg-muted rounded-xl border border-foreground flex items-center p-4 gap-4\">\n                            <div className=\"w-12 h-8 bg-background rounded border flex items-center justify-center\">\n                                <CreditCard className=\"size-5\" />\n                            </div>\n                            <div className=\"flex-1\">\n                                <p className=\"font-bold text-sm\">Mastercard ending in 4242</p>\n                                <p className=\"text-xs text-muted-foreground\">Expires 12/25</p>\n                            </div>\n                            <Button variant=\"ghost\" size=\"icon\">\n                                <Edit className=\"size-3\" />\n                            </Button>\n                        </div>\n                        <Button variant=\"outline\" className=\"shadow-none\">\n                            + Add new payment method\n                        </Button>\n                    </div>\n                </section>\n\n                <Separator />\n\n                {/* Confirm Section */}\n                <div className=\"flex flex-col gap-6\">\n                    <div className=\"flex items-end justify-between w-full\">\n                        <div className=\"flex flex-col gap-1\">\n                            <span className=\"text-sm text-muted-foreground\">Total to pay</span>\n                            <span className=\"font-bold text-4xl\">$444.50</span>\n                        </div>\n                        <Badge variant=\"secondary\" className=\"font-bold\">Free Shipping</Badge>\n                    </div>\n                    <Button size=\"lg\" className=\"w-full\">\n                        Confirm Payment\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}