[V0_FILE]typescriptreact:file="components/kokonutui/card-09.tsx" import { cn } from "@/lib/utils" import { ArrowUpRight } from "lucide-react" interface Card09Props { orderDetails?: { itemName: string quantity: number unitPrice: number }[] subtotal?: number tax?: number shipping?: number discount?: { code: string amount: number } total?: number currency?: string onCheckout?: () => void } const defaultOrderDetails = [ { itemName: "Premium Plan", quantity: 1, unitPrice: 99.99, }, ] export default function Card09({ orderDetails = defaultOrderDetails, subtotal = defaultOrderDetails.reduce((acc, item) => acc + item.unitPrice * item.quantity, 0), tax = subtotal * 0.08, // 8% default tax shipping = 0, discount = { code: "WELCOME10", amount: subtotal * 0.1, // 10% discount }, total = subtotal + tax + shipping - discount.amount, currency = "USD", }: Card09Props) { const formatPrice = (amount: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: currency, minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(amount) } return (

{/* Order Summary Header */}

Order Summary

{orderDetails.reduce((acc, item) => acc + item.quantity, 0)} items

{/* Order Items */}

{orderDetails.map((item, index) => (

{item.itemName}

Qty: {item.quantity} × {formatPrice(item.unitPrice)}

{formatPrice(item.unitPrice * item.quantity)}

))}

{/* Price Breakdown */}

Subtotal {formatPrice(subtotal)}

{shipping > 0 && (

Shipping {formatPrice(shipping)}

)} {tax > 0 && (

Tax {formatPrice(tax)}

)} {discount && (

Discount ({discount.code}) -{formatPrice(discount.amount)}

)}

{/* Total */}

Total {formatPrice(total)}

{/* Checkout Button */}

) }

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This