{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-confirmation-02",
  "title": "Order Confirmation 02",
  "description": "A simple order confirmation block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/order-confirmation-02/components/order-confirmation.tsx",
      "content": "import { Check } from \"lucide-react\";\nimport { Separator } from \"@/registry/bases/radix/ui/separator\";\n\ninterface OrderItem {\n  id: string;\n  imageSrc: string;\n  imageAlt: string;\n  name: string;\n  description: string;\n  price: number;\n  quantity: number;\n}\n\nconst orderItems: OrderItem[] = [\n  {\n    id: \"070\",\n    imageSrc: \"https://www.fffuel.co/images/dddepth-preview/dddepth-070.jpg\",\n    imageAlt: \"iPhone 15 Pro\",\n    name: \"iPhone 15 Pro\",\n    description: \"6.1-inch Super Retina XDR display with ProMotion.\",\n    price: 999,\n    quantity: 2,\n  },\n  {\n    id: \"010\",\n    imageSrc: \"https://www.fffuel.co/images/dddepth-preview/dddepth-010.jpg\",\n    imageAlt: \"AirPods Pro\",\n    name: \"AirPods Pro\",\n    description: \"Active Noise Cancellation with Adaptive Transparency.\",\n    price: 249,\n    quantity: 1,\n  },\n  {\n    id: \"012\",\n    imageSrc: \"https://www.fffuel.co/images/dddepth-preview/dddepth-012.jpg\",\n    imageAlt: \"MacBook Air M2\",\n    name: \"MacBook Air M2\",\n    description: \"13-inch laptop with M2 chip and 8GB unified memory.\",\n    price: 1199,\n    quantity: 1,\n  },\n];\n\nfunction formatCurrency(amount: number) {\n  return amount.toLocaleString(\"en-US\", {\n    style: \"currency\",\n    currency: \"USD\",\n    maximumFractionDigits: 2,\n  });\n}\n\nexport default function OrderConfirmation() {\n  const total = orderItems.reduce(\n    (sum, item) => sum + item.price * item.quantity,\n    0\n  );\n  return (\n    <div className=\"flex min-h-screen items-center justify-center\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col items-center bg-background px-6 pt-8 pb-10 text-center shadow-lg/5 sm:rounded-xl sm:border md:px-8\">\n        <div className=\"flex size-12 items-center justify-center rounded-full border border-green-500/12 bg-green-500/10\">\n          <Check className=\"size-6 text-green-500\" />\n        </div>\n        <p className=\"mt-7 font-medium text-3xl tracking-tight\">\n          Thank you for your purchase!\n        </p>\n        <p className=\"mt-4 text-muted-foreground text-sm sm:text-base\">\n          We've sent you an email with your order details to{\" \"}\n          <span className=\"font-medium text-foreground\">order@example.com</span>\n          .\n        </p>\n\n        <div className=\"mt-12 flex w-full flex-col gap-8\">\n          {orderItems.map((item) => (\n            <div className=\"flex items-center gap-4\" key={item.id}>\n              <div className=\"flex aspect-square w-14 shrink-0 items-center justify-center rounded-xl border-border/30 bg-secondary shadow-[0_0_15px_2px_rgba(0,0,0,0.1)] sm:w-18\">\n                <img\n                  alt={item.imageAlt}\n                  className=\"size-full select-none rounded-xl object-cover\"\n                  src={item.imageSrc}\n                />\n              </div>\n              <div className=\"text-start\">\n                <p className=\"font-medium\">{item.name}</p>\n                <p className=\"line-clamp-2 text-muted-foreground text-sm\">\n                  {item.description}\n                </p>\n              </div>\n              <div className=\"ms-auto flex flex-col items-end\">\n                <p className=\"font-medium text-foreground\">\n                  {formatCurrency(item.price)}\n                </p>\n                <p className=\"text-muted-foreground text-sm\">\n                  &times;{item.quantity}\n                </p>\n              </div>\n            </div>\n          ))}\n          <Separator />\n          <div className=\"flex items-center justify-between\">\n            <p className=\"text-muted-foreground\">Total</p>\n            <p className=\"font-medium text-foreground\">\n              {formatCurrency(total)}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}