"use client"; import { motion, AnimatePresence } from "framer-motion"; import { X, ShoppingBag, CreditCard, MapPin, Clock } from "lucide-react"; import { useState } from "react"; const Dialog = ({ isOpen, onClose, orderData }) => { return ( {isOpen && (

{/* Backdrop */} {/* Modal */}

{/* Header */}

Confirm Your Order

Review details before placing order

{/* Order Summary */}

{/* Items */}

Order Items

{orderData?.items?.map((item, index) => (

{item.quantity}x

{item.name}

{item.variant && (

{item.variant}

)}

${item.price} ))}

{/* Delivery Info */}

Delivery

{orderData?.delivery?.address}

Time

{orderData?.delivery?.time}

{/* Payment Method */}

Payment Method

{orderData?.payment?.method}

Verified

{/* Total */}

Subtotal ${orderData?.pricing?.subtotal}

Delivery ${orderData?.pricing?.delivery}

Tax ${orderData?.pricing?.tax}

Total ${orderData?.pricing?.total}

{/* Actions */}

)} ); }; const DialogDemo = () => { const [isModalOpen, setIsModalOpen] = useState(false); const sampleOrderData = { items: [ { name: "Premium Wireless Headphones", variant: "Black, Noise Cancelling", quantity: 1, price: "299.00", }, { name: "USB-C Cable", variant: "3ft, Braided", quantity: 2, price: "24.99", }, { name: "Phone Case", variant: "Clear, MagSafe Compatible", quantity: 1, price: "39.99", }, ], delivery: { address: "123 Main St, New York, NY", time: "2-3 business days", }, payment: { method: "•••• •••• •••• 4242", }, pricing: { subtotal: "363.98", delivery: "12.99", tax: "30.12", total: "407.09", }, }; return ( <>

Modern Dialog Component Built with Tailwind CSS & Framer Motion