FRONT END

[zeravez]

import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState([]);

useEffect(() => {
axios.get("http://127.0.0.1:5000/products")
.then(res => setProducts(res.data));
}, []);

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

const placeOrder = async () => {
await axios.post("http://127.0.0.1:5000/order", {
name: "Customer",
phone: "0000000000",
address: "Abuja",
items: cart
});

alert("Order placed!");
setCart([]);

};

return (
<div style={{ padding: 20 }}>

Fashion Store

  <h2>Products</h2>

  <div style={{ display: "flex", gap: 20 }}>
    {products.map(p => (
      <div key={p.id} style={{ border: "1px solid #ccc", padding: 10 }}>
        <img src={p.image} width="150" />
        <h3>{p.name}</h3>
        <p>₦{p.price}</p>

        {p.sizes.map(size => (
          <button key={size} onClick={() => addToCart(p, size)}>
            {size}
          </button>
        ))}
      </div>
    ))}
  </div>

  <h2>Cart</h2>

  {cart.map((item, i) => (
    <p key={i}>
      {item.name} - {item.size} - ₦{item.price}
    </p>
  ))}

  {cart.length > 0 && (
    <button onClick={placeOrder}>
      Place Order
    </button>
  )}
</div>

);