{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-01",
  "type": "registry:block",
  "title": "Order 01",
  "files": [
    {
      "path": "src/components/commercn/orders/order-01.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst orderData = {\n\torderNumber: \"CP099-AB\",\n\tstatus: \"Delivered\",\n\torderDate: \"Thu, 12 Jan 2025\",\n\testimatedDelivery: \"Mon, 16 Jan 2024\",\n\titems: [\n\t\t{\n\t\t\tid: 1,\n\t\t\tname: \"CD Product #1\",\n\t\t\tdescription: \"200 GB game CD\",\n\t\t\tprice: 306,\n\t\t\tquantity: 1,\n\t\t\timage:\n\t\t\t\t\"https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80\",\n\t\t},\n\t\t{\n\t\t\tid: 2,\n\t\t\tname: \"Hardware Product #2\",\n\t\t\tdescription: \"Playstation 2025\",\n\t\t\tprice: 1098,\n\t\t\tquantity: 1,\n\t\t\timage:\n\t\t\t\t\"https://images.unsplash.com/photo-1606813907291-d86efa9b94db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80\",\n\t\t},\n\t],\n\tpayment: {\n\t\tmethod: \"Paid via Visa Card\",\n\t\ttotal: 1404,\n\t},\n};\n\nexport function OrderOne() {\n\treturn (\n\t\t<Card className=\"w-full max-w-2xl border-gray-100\">\n\t\t\t<CardHeader>\n\t\t\t\t<div className=\"flex items-center justify-between mb-6\">\n\t\t\t\t\t<CardTitle className=\"text-xl font-semibold\">\n\t\t\t\t\t\tOrder: #{orderData.orderNumber}\n\t\t\t\t\t</CardTitle>\n\t\t\t\t\t<Button variant=\"outline\" size=\"sm\">\n\t\t\t\t\t\tDownload Invoice\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"grid grid-cols-3 gap-4 bg-muted rounded-lg p-4\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-1\">Order Status:</p>\n\t\t\t\t\t\t<Badge className=\"text-xs rounded-md\">{orderData.status}</Badge>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-1\">Order Date:</p>\n\t\t\t\t\t\t<p className=\"text-sm font-medium\">{orderData.orderDate}</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-1\">Delivery Date:</p>\n\t\t\t\t\t\t<p className=\"text-sm font-medium\">{orderData.estimatedDelivery}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t{/* Order Items */}\n\t\t\t\t<div className=\"space-y-4 mb-6\">\n\t\t\t\t\t{orderData.items.map((item) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-between py-3\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-4\">\n\t\t\t\t\t\t\t\t<div className=\"w-12 h-12 bg-gradient-to-br from-orange-400 to-pink-400 rounded-lg flex-shrink-0\">\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc={item.image}\n\t\t\t\t\t\t\t\t\t\talt={item.name}\n\t\t\t\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover rounded-lg opacity-80\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<h4 className=\"font-medium\">{item.name}</h4>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"text-right\">\n\t\t\t\t\t\t\t\t<p className=\"font-semibold\">${item.price}</p>\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-gray-500\">\n\t\t\t\t\t\t\t\t\tQuantity: {item.quantity}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Payment & Total */}\n\t\t\t\t<div className=\"border-t border-gray-100 pt-4\">\n\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t<div className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t<span>{orderData.payment.method}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"text-right\">\n\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground mr-2\">Total:</span>\n\t\t\t\t\t\t\t<span className=\"text-lg font-bold\">\n\t\t\t\t\t\t\t\t${orderData.payment.total}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}