{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-order-summary-shadcnui",
  "type": "registry:component",
  "title": "Glass Order Summary",
  "description": "Glassmorphism order summary card with item list and checkout button",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-order-summary.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight, CreditCard, ShoppingBag } from \"lucide-react\";\n\ninterface OrderItem {\n  id: string;\n  name: string;\n  price: number;\n  image: string;\n  quantity: number;\n  variant?: string;\n}\n\ninterface GlassOrderSummaryProps {\n  items?: OrderItem[];\n  subtotal?: number;\n  tax?: number;\n  shipping?: number;\n  total?: number;\n  className?: string;\n}\n\nconst defaultItems: OrderItem[] = [\n  {\n    id: \"1\",\n    name: \"Premium Icon Pack\",\n    price: 29.0,\n    image:\n      \"https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=100&q=80\",\n    quantity: 1,\n    variant: \"Pro License\",\n  },\n  {\n    id: \"2\",\n    name: \"UI Design Kit\",\n    price: 49.0,\n    image:\n      \"https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=100&q=80\",\n    quantity: 1,\n    variant: \"Dark Mode\",\n  },\n];\n\nexport function GlassOrderSummary({\n  items = defaultItems,\n  subtotal = 78.0,\n  tax = 7.8,\n  shipping = 0,\n  total = 85.8,\n  className,\n}: GlassOrderSummaryProps) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4 }}\n      className={cn(\"w-full max-w-[400px]\", className)}\n    >\n      <Card className=\"group relative overflow-hidden rounded-2xl border-border/50 bg-card/80 backdrop-blur-md transition-all duration-300 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10\">\n        <div className=\"p-6\">\n          <div className=\"mb-6 flex items-center gap-2\">\n            <div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary\">\n              <ShoppingBag className=\"h-4 w-4\" />\n            </div>\n            <h3 className=\"text-lg font-semibold text-foreground\">\n              Order Summary\n            </h3>\n          </div>\n\n          <div className=\"space-y-4\">\n            {items.map((item) => (\n              <motion.div\n                key={item.id}\n                initial={{ opacity: 0, x: -10 }}\n                animate={{ opacity: 1, x: 0 }}\n                className=\"flex items-center gap-4 rounded-lg p-2 transition-colors hover:bg-background/40\"\n              >\n                <div className=\"h-12 w-12 overflow-hidden rounded-md border border-border/50 bg-background/50\">\n                  <img\n                    src={item.image}\n                    alt={item.name}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </div>\n                <div className=\"flex-1\">\n                  <h4 className=\"text-sm font-medium text-foreground\">\n                    {item.name}\n                  </h4>\n                  <p className=\"text-xs text-muted-foreground\">\n                    {item.variant}\n                  </p>\n                </div>\n                <div className=\"text-right\">\n                  <p className=\"text-sm font-medium text-foreground\">\n                    ${item.price.toFixed(2)}\n                  </p>\n                  <p className=\"text-xs text-muted-foreground\">\n                    x{item.quantity}\n                  </p>\n                </div>\n              </motion.div>\n            ))}\n          </div>\n\n          <Separator className=\"my-6 bg-border/50\" />\n\n          <div className=\"space-y-2 text-sm\">\n            <div className=\"flex justify-between text-muted-foreground\">\n              <span>Subtotal</span>\n              <span>${subtotal.toFixed(2)}</span>\n            </div>\n            <div className=\"flex justify-between text-muted-foreground\">\n              <span>Tax</span>\n              <span>${tax.toFixed(2)}</span>\n            </div>\n            {shipping > 0 && (\n              <div className=\"flex justify-between text-muted-foreground\">\n                <span>Shipping</span>\n                <span>${shipping.toFixed(2)}</span>\n              </div>\n            )}\n            <div className=\"mt-4 flex justify-between text-base font-semibold text-foreground\">\n              <span>Total</span>\n              <span>${total.toFixed(2)}</span>\n            </div>\n          </div>\n\n          <Button className=\"group/btn mt-6 w-full gap-2 bg-primary text-primary-foreground shadow-lg shadow-primary/20 transition-all hover:shadow-primary/40\">\n            <CreditCard className=\"h-4 w-4\" />\n            Pay Now\n            <ArrowRight className=\"h-4 w-4 transition-transform group-hover/btn:translate-x-1\" />\n          </Button>\n        </div>\n      </Card>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-order-summary-shadcnui.tsx"
    }
  ]
}