{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-summaries-01",
  "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": [
    "lucide-react"
  ],
  "registryDependencies": [
    "input",
    "button",
    "card",
    "badge",
    "button",
    "card",
    "badge",
    "button",
    "badge"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/order-summaries/01/data.ts",
      "content": "export const orderItems = [\n  {\n    id: \"1\",\n    name: \"Custom Notebook\",\n    price: 20.0,\n    variant: \"Brown / B5 / Grid\",\n    quantity: 1,\n    image: \"/images/products/list1.png\"\n  },\n  {\n    id: \"2\",\n    name: \"Custom T-shirt\",\n    price: 10.0,\n    variant: \"Blue / Medium\",\n    quantity: 1,\n    image: \"/images/products/list2.png\"\n  }\n];\n",
      "type": "registry:component",
      "target": "components/order-summaries/data.ts"
    },
    {
      "path": "examples/blocks/ecommerce/order-summaries/01/order-item.tsx",
      "content": "import { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Trash2 } from \"lucide-react\";\n\ninterface OrderItemProps {\n  id: string;\n  name: string;\n  price: number;\n  variant: string;\n  quantity: number;\n  image: string;\n}\n\nexport const OrderItem = ({ name, price, variant, quantity, image }: OrderItemProps) => {\n  return (\n    <div className=\"flex items-start gap-4 border-b py-6 last:border-b-0\">\n      <img src={image} alt={name} className=\"h-20 w-20 rounded border object-cover\" />\n      <div className=\"flex-1 space-y-1\">\n        <h3 className=\"font-medium\">{name}</h3>\n        <p className=\"text-2xl font-semibold\">${price.toFixed(2)}</p>\n        <p className=\"text-muted-foreground text-sm\">{variant}</p>\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <Input type=\"number\" value={quantity} className=\"w-24 text-center\" readOnly />\n        <div className=\"min-w-[80px] text-right\">\n          <p className=\"text-lg font-semibold\">${(price * quantity).toFixed(2)}</p>\n        </div>\n        <Button variant=\"ghost\" size=\"icon\" className=\"text-muted-foreground hover:text-foreground\">\n          <Trash2 className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/order-summaries/order-item.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/order-summaries/01/order-items.tsx",
      "content": "import { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nimport { OrderItem } from \"./order-item\";\nimport { orderItems } from \"./data\";\n\nexport const OrderItems = () => {\n  return (\n    <Card className=\"shadow-none\">\n      <CardContent>\n        <div className=\"\">\n          <div className=\"mb-6 flex items-center justify-between gap-3\">\n            <h2 className=\"text-xl font-semibold\">Order Items</h2>\n            <Badge variant=\"destructive\">Unfulfilled</Badge>\n          </div>\n        </div>\n\n        <div className=\"divide-y\">\n          {orderItems.map((item) => (\n            <OrderItem key={item.id} {...item} />\n          ))}\n        </div>\n\n        <div className=\"mt-6 flex items-center justify-between\">\n          <p className=\"text-muted-foreground text-sm\">\n            Effortlessly manage your orders with our intuitive Order List page.\n          </p>\n          <div className=\"flex gap-3\">\n            <Button variant=\"outline\">Fulfill item</Button>\n            <Button>Create shipping label</Button>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/order-summaries/order-items.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/order-summaries/01/order-summary.tsx",
      "content": "import { Card } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronDown } from \"lucide-react\";\n\ninterface OrderSummaryProps {\n  subtotal: number;\n  discount: number;\n  shipping: number;\n  total: number;\n  paidAmount: number;\n}\n\nexport const OrderSummary = ({\n  subtotal,\n  discount,\n  shipping,\n  total,\n  paidAmount\n}: OrderSummaryProps) => {\n  return (\n    <Card className=\"p-6\">\n      <div className=\"mb-6 flex items-start justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <h2 className=\"text-xl font-semibold\">Order Summary</h2>\n          <Badge variant=\"secondary\" className=\"bg-orange-100 text-orange-800 hover:bg-orange-100\">\n            Payment pending\n          </Badge>\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n          <span>Use this personalized guide to get your store up and running.</span>\n          <ChevronDown className=\"h-4 w-4\" />\n        </div>\n      </div>\n\n      <div className=\"space-y-4\">\n        <div className=\"flex justify-between\">\n          <span className=\"text-muted-foreground\">Subtotal</span>\n          <div className=\"text-right\">\n            <span className=\"text-muted-foreground mr-8\">2 item</span>\n            <span className=\"font-medium\">${subtotal.toFixed(2)}</span>\n          </div>\n        </div>\n\n        <div className=\"flex justify-between\">\n          <span className=\"text-muted-foreground\">Discount</span>\n          <div className=\"text-right\">\n            <span className=\"text-muted-foreground mr-8\">New customer</span>\n            <span className=\"font-medium\">-${discount.toFixed(2)}</span>\n          </div>\n        </div>\n\n        <div className=\"flex justify-between border-b pb-4\">\n          <span className=\"text-muted-foreground\">Shipping</span>\n          <div className=\"text-right\">\n            <span className=\"text-muted-foreground mr-8\">Free shipping</span>\n            <span className=\"font-medium\">${shipping.toFixed(2)}</span>\n          </div>\n        </div>\n\n        <div className=\"flex justify-between pt-2 text-lg font-semibold\">\n          <span>Total</span>\n          <span>${total.toFixed(2)}</span>\n        </div>\n\n        <div className=\"flex justify-between border-t pt-4\">\n          <span className=\"text-muted-foreground\">Paid by customer</span>\n          <span className=\"font-medium\">${paidAmount.toFixed(2)}</span>\n        </div>\n\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">Payment due when invoice is sent</span>\n          <Button variant=\"link\" className=\"h-auto p-0\">\n            Edit\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"mt-6 flex items-center justify-between\">\n        <p className=\"text-muted-foreground text-sm\">\n          Review your order at a glance on the Order Summary page.\n        </p>\n        <div className=\"flex gap-3\">\n          <Button variant=\"outline\">Send invoice</Button>\n          <Button>Collect payment</Button>\n        </div>\n      </div>\n    </Card>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/order-summaries/order-summary.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/order-summaries/01/page.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\";\n\nimport { OrderItems } from \"./order-items\";\nimport { OrderSummary } from \"./order-summary\";\n\nexport default function Page() {\n  return (\n    <div className=\"bg-background min-h-screen p-4 md:p-8\">\n      <div className=\"mx-auto max-w-4xl space-y-6\">\n        <header className=\"space-y-2\">\n          <div className=\"flex flex-wrap items-center gap-3\">\n            <h1 className=\"text-2xl font-semibold\">Order ID: #430011564329</h1>\n            <Badge\n              variant=\"secondary\"\n              className=\"bg-orange-100 text-orange-800 hover:bg-orange-100\">\n              Payment pending\n            </Badge>\n            <Badge variant=\"destructive\">Unfulfilled</Badge>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">\n            January 12, 2024 at 10:30 pm from Draft Orders\n          </p>\n        </header>\n\n        <OrderItems />\n\n        <OrderSummary subtotal={30.0} discount={2.0} shipping={0.0} total={28.0} paidAmount={0.0} />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/order-summaries/order-summaries.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}