1 files changed, 52 insertions, 1 deletions
diff --git a/storefront/pages/index.js b/storefront/pages/index.js
index fa4a592..dda2a6d 100644
--- a/storefront/pages/index.js
+++ b/storefront/pages/index.js
@@ -1,18 +1,69 @@
+import { useState } from "react"
 import { useProducts } from "medusa-react"
+import { medusaClient } from "../lib/medusa-client"
+import { ensureCart } from "../lib/storefront"
+import { formatAmount } from "../lib/format"
 
 export default function Home() {
   const { products, isLoading } = useProducts()
+  const [status, setStatus] = useState("")
+  const [addingId, setAddingId] = useState(null)
+
+  const handleAddToCart = async (product) => {
+    const variantId = product?.variants?.[0]?.id
+    if (!variantId) {
+      setStatus("Aucune variante disponible pour ce produit.")
+      return
+    }
+
+    setAddingId(product.id)
+    setStatus("")
+
+    try {
+      const cart = await ensureCart(medusaClient)
+      await medusaClient.carts.lineItems.create(cart.id, {
+        variant_id: variantId,
+        quantity: 1,
+      })
+      setStatus(`${product.title} a été ajouté au panier.`)
+    } catch (error) {
+      setStatus("Impossible d'ajouter au panier pour le moment.")
+    } finally {
+      setAddingId(null)
+    }
+  }
 
   return (
-    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
+    <div>
       <h1>Bienvenue sur la boutique Lucien-sens-bon</h1>
       {isLoading && <span>Chargement des produits...</span>}
+      {status && <p style={{ marginTop: "1rem" }}>{status}</p>}
       
       <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem" }}>
         {products && products.map((product) => (
           <div key={product.id} style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}>
             <h3>{product.title}</h3>
             <p>{product.description}</p>
+            <p style={{ fontWeight: 600 }}>
+              {formatAmount(
+                product?.variants?.[0]?.prices?.[0]?.amount,
+                product?.variants?.[0]?.prices?.[0]?.currency_code || "eur"
+              )}
+            </p>
+            <button
+              type="button"
+              onClick={() => handleAddToCart(product)}
+              disabled={addingId === product.id}
+              style={{
+                border: "1px solid #ccc",
+                background: "#fff",
+                borderRadius: "6px",
+                padding: "0.4rem 0.8rem",
+                cursor: "pointer",
+              }}
+            >
+              {addingId === product.id ? "Ajout..." : "Ajouter au panier"}
+            </button>
           </div>
         ))}
       </div>