Products - Copy this React, Tailwind Component to your project

add 'use client' import { useState } from 'react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" // Mock product data const products = [ { id: 1, name: 'Product 1', price: 10 }, { id: 2, name: 'Product 2', price: 15 }, { id: 3, name: 'Product 3', price: 20 }, { id: 4, name: 'Product 4', price: 25 }, { id: 5, name: 'Product 5', price: 30 }, ] type CartItem = { id: number name: string price: number quantity: number } export default function POSSystem() { const [cart, setCart] = useState<CartItem[]>([]) const [total, setTotal] = useState(0) const addToCart = (product: { id: number; name: string; price: number }) => { const existingItem = cart.find(item => item.id === product.id) if (existingItem) { setCart(cart.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item )) } else { setCart([...cart, { ...product, quantity: 1 }]) } setTotal(total + product.price) } const removeFromCart = (id: number) => { const item = cart.find(item => item.id === id) if (item) { if (item.quantity > 1) { setCart(cart.map(item => item.id === id ? { ...item, quantity: item.quantity - 1 } : item )) } else { setCart(cart.filter(item => item.id !== id)) } setTotal(total - item.price) } } const checkout = () => { alert(`Total: $${total.toFixed(2)}. Thank you for your purchase!`) setCart([]) setTotal(0) } return ( <div className="flex h-screen"> <div className="w-2/3 p-4"> <Card> <CardHeader> <CardTitle>Products</CardTitle> </CardHeader> <CardContent> <div className="grid grid-cols-3 gap-4"> {products.map(product => ( <Button key={product.id} onClick={() => addToCart(product)} className="h-20"> {product.name} - ${product.price} </Button> ))} </div> </CardContent> </Card> </div> <div className="w-1/3 p-4 bg-gray-100"> <Card> <CardHeader> <CardTitle>Cart</CardTitle> </CardHeader> <CardContent> <ScrollArea className="h-[300px]"> {cart.map(item => ( <div key={item.id} className="flex justify-between items-center mb-2"> <span>{item.name} x {item.quantity}</span> <div> <span className="mr-2">${(item.price * item.quantity).toFixed(2)}</span> <Button variant="outline" size="sm" onClick={() => removeFromCart(item.id)}>-</Button> </div> </div> ))} </ScrollArea> <div className="mt-4"> <div className="flex justify-between items-center mb-2"> <span className="font-bold">Total:</span> <span className="font-bold">${total.toFixed(2)}</span> </div> <Button onClick={checkout} className="w-full">Checkout</Button> </div> </CardContent> </Card> </div> </div> ) }