Store

gistfile1.txt

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button, Input, Select } from "@/components/ui/button";
import { ShoppingCart } from "lucide-react";

const products = [
  { id: 1, name: "Tea - All Flavors", price: 10, category: "Tea", image: "https://via.placeholder.com/150" },
  { id: 2, name: "Coffee - All Flavors", price: 15, category: "Coffee", image: "https://via.placeholder.com/150" },
  { id: 3, name: "Karak - All Flavors", price: 12, category: "Karak", image: "https://via.placeholder.com/150" },
];

export default function HandmadeShop() {
  const [cart, setCart] = useState([]);
  const [category, setCategory] = useState("All");
  const [checkoutMessage, setCheckoutMessage] = useState("");

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const filteredProducts = category === "All" ? products : products.filter(p => p.category === category);

  const handleCheckout = async () => {
    const response = await fetch("/api/checkout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ cart }),
    });
    if (response.ok) {
      setCheckoutMessage("Checkout successful! Thank you for your purchase.");
      setCart([]);
    } else {
      setCheckoutMessage("Checkout failed. Please try again.");
    }
  };

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-4">Beverage Product Gallery</h1>
      <Select value={category} onChange={(e) => setCategory(e.target.value)} className="mb-4">
        <option value="All">All</option>
        <option value="Tea">Tea</option>
        <option value="Coffee">Coffee</option>
        <option value="Karak">Karak</option>
      </Select>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {filteredProducts.map((product) => (
          <Card key={product.id} className="p-4">
            <CardContent>
              <img src={product.image} alt={product.name} className="w-full h-40 object-cover" />
              <h2 className="text-xl font-semibold mt-2">{product.name}</h2>
              <p className="text-gray-600">${product.price}</p>
              <Button onClick={() => addToCart(product)} className="mt-2">Add to Cart</Button>
            </CardContent>
          </Card>
        ))}
      </div>
      <div className="mt-6 p-4 border-t">
        <h2 className="text-2xl font-bold">Shopping Cart</h2>
        {cart.length === 0 ? <p className="text-gray-500">Cart is empty</p> : (
          <ul>
            {cart.map((item, index) => (
              <li key={index} className="flex justify-between py-2">
                {item.name} - ${item.price}
              </li>
            ))}
          </ul>
        )}
        <Button onClick={handleCheckout} className="mt-4 bg-green-600 text-white">
          <ShoppingCart className="w-5 h-5 inline-block mr-2" /> Checkout
        </Button>
        {checkoutMessage && <p className="mt-2 text-blue-600">{checkoutMessage}</p>}
      </div>
    </div>
  );
}