34 lines
931 B
TypeScript
34 lines
931 B
TypeScript
import React from 'react';
|
|
import { useCart } from './CartContext';
|
|
|
|
const CartPage: React.FC = () => {
|
|
const { cart } = useCart();
|
|
|
|
const total = cart.reduce((sum, item) => sum + item.price, 0);
|
|
|
|
return (
|
|
<div className="container mx-auto p-4">
|
|
<h1 className="text-2xl font-bold mb-4">Your Shopping Cart</h1>
|
|
{cart.length === 0 ? (
|
|
<p>Your cart is empty.</p>
|
|
) : (
|
|
<div>
|
|
<ul className="divide-y divide-gray-200">
|
|
{cart.map((item, index) => (
|
|
<li key={index} className="py-2 flex justify-between">
|
|
<span>{item.name}</span>
|
|
<span>${item.price.toFixed(2)}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-4 pt-2 border-t border-gray-200 text-xl font-bold">
|
|
Total: ${total.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CartPage;
|