{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-summaries-02",
  "type": "registry:component",
  "title": "Order Summaries",
  "author": "Toby Belhome",
  "description": "Provide clear and organized order details with Tailwind CSS order summary sections. These layouts display purchased items, quantities, prices, and totals in a visually appealing format, ensuring users can review their orders easily. Perfect for online stores and marketplaces aiming for modern, user-friendly, and conversion-focused checkout experiences.",
  "dependencies": [],
  "registryDependencies": [
    "card",
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/order-summaries/02/page.tsx",
      "content": "import { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\n\nexport default function OrderSummary() {\n  const orderItems = [\n    {\n      id: 1,\n      name: \"All In One Chocolate Combo\",\n      pack: \"Medium\",\n      quantity: 1,\n      price: 50.0,\n      image: \"/images/products/list4.png\"\n    },\n    {\n      id: 2,\n      name: \"Desire Of Hearts\",\n      pack: \"Large\",\n      quantity: 1,\n      price: 50.0,\n      image: \"/images/products/list5.png\"\n    }\n  ];\n\n  const subtotal = orderItems.reduce((sum, item) => sum + item.price, 0);\n  const shipping = 2.0;\n  const tax = 5.0;\n  const total = subtotal + shipping + tax;\n\n  return (\n    <div className=\"py-10 lg:py-20\">\n      <div className=\"mx-auto max-w-5xl px-4\">\n        <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12\">\n          <div className=\"space-y-8\">\n            <div>\n              <h1 className=\"font-heading mb-6 text-4xl text-balance sm:text-5xl lg:text-5xl\">\n                Thank you for your purchase!\n              </h1>\n              <p className=\"text-muted-foreground text-base text-balance\">\n                Your order will be processed within 24 hours during working days. We will notify you\n                by email once your order has been shipped.\n              </p>\n            </div>\n\n            <div className=\"space-y-6\">\n              <h2 className=\"font-bold\">Billing address</h2>\n\n              <Separator />\n\n              <div className=\"space-y-4 text-sm\">\n                <div className=\"grid grid-cols-3 gap-4\">\n                  <dt className=\"font-semibold\">Name</dt>\n                  <dd className=\"col-span-2\">Jane Smith</dd>\n                </div>\n\n                <div className=\"grid grid-cols-3 gap-4\">\n                  <dt className=\"font-semibold\">Address</dt>\n                  <dd className=\"col-span-2\">\n                    456 Oak St #3b, San Francisco,\n                    <br />\n                    CA 94102, United States\n                  </dd>\n                </div>\n\n                <div className=\"grid grid-cols-3 gap-4\">\n                  <dt className=\"font-semibold\">Phone</dt>\n                  <dd className=\"col-span-2\">+1 (415) 555-1234</dd>\n                </div>\n\n                <div className=\"grid grid-cols-3 gap-4\">\n                  <dt className=\"font-semibold\">Email</dt>\n                  <dd className=\"col-span-2\">jane.smith@email.com</dd>\n                </div>\n              </div>\n\n              <Button size=\"lg\">Track Your Order</Button>\n            </div>\n          </div>\n\n          <Card className=\"bg-muted/50 border-0 shadow-none\">\n            <CardHeader>\n              <CardTitle className=\"font-heading text-xl font-normal\">Order Summary</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-6\">\n              <div className=\"mb-6 grid grid-cols-3 gap-4\">\n                <div>\n                  <p className=\"text-muted-foreground mb-1 text-sm\">Date</p>\n                  <p className=\"font-semibold\">02 May 2023</p>\n                </div>\n                <div>\n                  <p className=\"text-muted-foreground mb-1 text-sm\">Order Number</p>\n                  <p className=\"font-semibold\">024-125478956</p>\n                </div>\n                <div>\n                  <p className=\"text-muted-foreground mb-1 text-sm\">Payment Method</p>\n                  <p className=\"font-semibold\">Mastercard</p>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div className=\"space-y-6\">\n                {orderItems.map((item) => (\n                  <div key={item.id} className=\"flex gap-4\">\n                    <div className=\"bg-muted size-16 flex-shrink-0 overflow-hidden rounded-lg\">\n                      <img\n                        src={item.image}\n                        alt={item.name}\n                        className=\"h-full w-full object-cover\"\n                      />\n                    </div>\n                    <div className=\"min-w-0 flex-1\">\n                      <h3 className=\"mb-1 font-semibold\">{item.name}</h3>\n                      <p className=\"text-muted-foreground text-sm\">Pack: {item.pack}</p>\n                      <p className=\"text-muted-foreground text-sm\">Qty: {item.quantity}</p>\n                    </div>\n                    <div className=\"text-right font-semibold\">${item.price.toFixed(2)}</div>\n                  </div>\n                ))}\n              </div>\n\n              <Separator />\n\n              <div className=\"space-y-3 text-sm\">\n                <div className=\"text-muted-foreground flex justify-between\">\n                  <span>Sub Total</span>\n                  <span>${subtotal.toFixed(2)}</span>\n                </div>\n                <div className=\"text-muted-foreground flex justify-between\">\n                  <span>Shipping</span>\n                  <span>${shipping.toFixed(2)}</span>\n                </div>\n                <div className=\"text-muted-foreground flex justify-between\">\n                  <span>Tax</span>\n                  <span>${tax.toFixed(2)}</span>\n                </div>\n              </div>\n\n              <Separator />\n\n              <div className=\"flex items-center justify-between\">\n                <span className=\"font-bold\">Order Total</span>\n                <span className=\"font-bold\">${total.toFixed(2)}</span>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/order-summaries-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}