Untitled

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>
  );
}