Untitled
unknown
plain_text
18 days ago
2.2 kB
4
Indexable
import { createContext, useContext, useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { ShoppingCart } from "lucide-react"; // Context for managing cart state const CartContext = createContext(); const CartProvider = ({ children }) => { const [cart, setCart] = useState([]); const addToCart = (item) => { setCart([...cart, item]); }; return ( <CartContext.Provider value={{ cart, addToCart }}> {children} </CartContext.Provider> ); }; const useCart = () => useContext(CartContext); const menuItems = [ { id: 1, name: "Burger", price: 5.99 }, { id: 2, name: "Pizza", price: 8.99 }, { id: 3, name: "Pasta", price: 6.99 }, ]; const Menu = () => { const { addToCart } = useCart(); return ( <div className="grid grid-cols-3 gap-4 p-4"> {menuItems.map((item) => ( <Card key={item.id} className="p-4 text-center"> <CardContent> <h2 className="text-xl font-bold">{item.name}</h2> <p className="text-gray-600">${item.price.toFixed(2)}</p> <Button className="mt-2" onClick={() => addToCart(item)}> Add to Cart </Button> </CardContent> </Card> ))} </div> ); }; const Cart = () => { const { cart } = useCart(); return ( <div className="p-4 border-t mt-4"> <h2 className="text-2xl font-bold flex items-center"> <ShoppingCart className="mr-2" /> Cart </h2> {cart.length === 0 ? ( <p className="text-gray-500">Your cart is empty</p> ) : ( <ul> {cart.map((item, index) => ( <li key={index} className="border-b py-2"> {item.name} - ${item.price.toFixed(2)} </li> ))} </ul> )} </div> ); }; export default function App() { return ( <CartProvider> <div className="p-6 max-w-4xl mx-auto"> <h1 className="text-3xl font-bold mb-4">Food Delivery</h1> <Menu /> <Cart /> </div> </CartProvider> ); }
Editor is loading...
Leave a Comment