Add to Cart - Copy this React, Tailwind Component to your project

Import React, { useState } from "react"; interface CartItem { id: number; name: string; img: string; packageType: string; location: string; language: string; price: number; } const AddToCartPage: React.FC = () => { const [cartItems, setCartItems] = useState<CartItem[]>([ { id: 1, name: "Navratri Durga Puja", img: "/uploads/1728075388389 Durga Mata.jpeg", packageType: "Premium", location: "Bihar", language: "Hindi", price: 71000, }, { id: 2, name: "Ganesh Chaturthi Puja", img: "/uploads/ganesh puja.jpeg", packageType: "Basic", location: "Mumbai", language: "English", price: 5100, }, ]); const [promoCode, setPromoCode] = useState(""); const [discount, setDiscount] = useState(0); const handleRemove = (id: number) => { setCartItems(cartItems.filter((item) => item.id !== id)); }; const handleApplyPromo = () => { if (promoCode === "DISCOUNT10") { setDiscount(0.1); // 10% discount } else { alert("Invalid promo code"); } }; const subtotal = cartItems.reduce((sum, item) => sum + item.price, 0); const total = subtotal subtotal * discount; return ( <div className="min h screen bg gray 100"> {/* Header Section */} <header className="bg white shadow"> <div className="container mx auto px 6 py 4 flex justify between items center"> <h1 className="text xl font bold">OKPuja</h1> <nav> <a href="/services" className="text gray 600 hover:text gray 800 mr 4"> Services </a> <a href="/cart" className="text gray 600 hover:text gray 800"> Cart ({cartItems.length}) </a> </nav> </div> </header> {/* Main Content */} <div className="container mx auto px 6 py 8"> <h2 className="text 2xl font bold mb 6">Your Cart</h2> {/* Cart Items Section */} <div className="space y 4"> {cartItems.map((item) => ( <div key={item.id} className="flex items center bg white shadow rounded lg p 4" > <img src={item.img} alt={item.name} className="w 16 h 16 rounded md object cover" /> <div className="ml 4 flex grow"> <h3 className="font semibold">{item.name}</h3> <p className="text sm text gray 600"> Package: {item.packageType} </p> <p className="text sm text gray 600"> Location: {item.location} | Language: {item.language} </p> <p className="text lg font bold text gray 800">₹{item.price}</p> </div> <button onClick={() => handleRemove(item.id)} className="text red 500 hover:text red 700" > Remove </button> </div> ))} </div> {/* Total Cost Section */} <div className="sticky bottom 0 bg white shadow lg rounded lg mt 6 p 4"> <div className="flex justify between items center mb 4"> <span className="text gray 600">Subtotal</span> <span className="font bold">₹{subtotal.toFixed(2)}</span> </div> {discount > 0 && ( <div className="flex justify between items center mb 4 text green 500"> <span>Discount (10%)</span> <span className="font bold"> ₹{(subtotal * discount).toFixed(2)}</span> </div> )} <div className="flex justify between items center text lg font bold"> <span>Total</span> <span>₹{total.toFixed(2)}</span> </div> <div className="mt 4 flex"> <input type="text" value={promoCode} onChange={(e) => setPromoCode(e.target.value)} placeholder="Enter Promo Code" className="flex grow px 4 py 2 border rounded l lg" /> <button onClick={handleApplyPromo} className="bg blue 600 text white px 4 py 2 rounded r lg hover:bg blue 700" > Apply </button> </div> </div> {/* Action Buttons Section */} <div className="mt 6 flex justify between"> <button onClick={() => alert("Continuing shopping...")} className="bg gray 600 text white px 4 py 2 rounded hover:bg gray 700" > Continue Shopping </button> <button onClick={() => alert("Proceeding to checkout...")} className="bg green 600 text white px 4 py 2 rounded hover:bg green 700" > Proceed to Checkout </button> </div> </div> </div> ); }; export default AddToCartPage;