Components
Loading preview...
A comprehensive UI component for displaying items in a shopping cart, allowing users to adjust quantities, remove items, and view a detailed cost summary.
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/shopping-cartimport * as React from 'react';
import { useState } from 'react';
import { ShoppingCart } from '@/components/ui/shopping-cart';
import { Button } from '@/components/ui/button';
interface CartItem {
id: string;
name: string;
price: number;
quantity: number;
imageUrl: string;
}
export default function ShoppingCartDemo() {
const [cartItems, setCartItems] = useState([
{
id: '1',
name: 'Sony WH-1000XM5 Wireless Headphones',
price: 99.99,
quantity: 1,
imageUrl: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
},
{
id: '2',
name: 'Apple Watch Series 7',
price: 249.00,
quantity: 2,
imageUrl: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
},
{
id: '3',
name: 'Samsung 55" 4K Ultra HD Smart TV',
price: 799.50,
quantity: 1,
imageUrl: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
},
]);
const handleQuantityChange = (id: string, newQuantity: number) => {
setCartItems((prevItems) =>
prevItems.map((item) =>
item.id === id ? { ...item, quantity: Math.max(1, newQuantity) } : item
)
);
};
const handleRemoveItem = (id: string) => {
setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
};
const handleClearCart = () => {
setCartItems([]);
};
const handleResetCart = () => {
setCartItems([
{
id: '1',
name: 'Wireless Bluetooth Headphones',
price: 99.99,
quantity: 1,
imageUrl: 'https://images.unsplash.com/photo-1505740420928-56747571760b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
id: '2',
name: 'Smartwatch Series 7',
price: 249.00,
quantity: 2,
imageUrl: 'https://images.unsplash.com/photo-1546868871-704179b76c81?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
{
id: '3',
name: '4K Ultra HD Smart TV',
price: 799.50,
quantity: 1,
imageUrl: 'https://images.unsplash.com/photo-1593789387431-ec72f416a13d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
},
]);
};
return (
<div className="p-8 max-w-3xl mx-auto">
<ShoppingCart
items={cartItems}
onQuantityChange={handleQuantityChange}
onRemoveItem={handleRemoveItem}
/>
</div>
);
}