From 8eba633d93867ea7952b57245ad1bd287a484dc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sof=C3=ADa=20Maturana?= <sofimaturana830@gmail.com>
Date: Tue, 14 Apr 2026 22:23:32 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20p=C3=A1gina=20de=20pizza?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend                  |  2 +-
 src/App.jsx              |  2 ++
 src/Home.jsx             | 13 ++++++++++++-
 src/components/Pizza.jsx | 37 +++++++++++++++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Pizza.jsx

diff --git a/backend b/backend
index 01bc008..d86ee9c 160000
--- a/backend
+++ b/backend
@@ -1 +1 @@
-Subproject commit 01bc0087cc8a4d3eae81a757a34e19129ee4ed76
+Subproject commit d86ee9ce553a0421211a48bacce8a2ea49b69c5d
diff --git a/src/App.jsx b/src/App.jsx
index cd29bdf..2ce09d9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import Cart from "./Cart";
 import Footer from "./Footer";
 import Home from "./Home";
 import Navbar from "./Navbar";
+import Pizza from "./components/Pizza";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
         <Home />
         <Cart />
       </main>
+      <Pizza />
       <Footer />
     </>
   );
diff --git a/src/Home.jsx b/src/Home.jsx
index 4877eda..3a5e9e2 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -1,11 +1,22 @@
+import { useState } from "react";
 import española from "./assets/española.jpg";
 import napolitana from "./assets/napolitana.jpg";
 import pepperoni from "./assets/pepperoni.jpg";
 import CardPizza from "./components/CardPizza";
 import Header from "./Header";
-import { pizzas } from "./pizzas";
+import { useEffect } from "react";
 
 const Home = () => {
+  const [pizzas, setPizzas] = useState([]);
+  const fetchPizzas = async () => {
+    const url = "http://localhost:5000/api/pizzas";
+    const res = await fetch(url);
+    const data = await res.json();
+    setPizzas(data);
+  };
+  useEffect(() => {
+    fetchPizzas();
+  }, []);
   return (
     <section id="home" className="w-full flex flex-col gap-4 pb-4">
       <Header />
diff --git a/src/components/Pizza.jsx b/src/components/Pizza.jsx
new file mode 100644
index 0000000..686fa24
--- /dev/null
+++ b/src/components/Pizza.jsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+const Pizza = () => {
+  const [pizza, setPizza] = useState(null);
+  const fetchPizza = async () => {
+    const url = "http://localhost:5000/api/pizzas/p001";
+    const res = await fetch(url);
+    const data = await res.json();
+    setPizza(data);
+  };
+  useEffect(() => {
+    fetchPizza();
+  });
+  return (
+    pizza && (
+      <section id="pizza">
+        <h1 className="text-4xl font-bold">Pizza {pizza.name}</h1>
+        <p className="text-green-700 font-bold text-2xl">
+          ${pizza.price.toLocaleString("es-CL")}
+        </p>
+        <img src={pizza.img} className="rounded-md" />
+        <p>{pizza.descripcion}</p>
+        <h2 className="text-3xl">Ingredientes</h2>
+        <ul>
+          {pizza.ingredients.map((i, index) => (
+            <li key={index}>- {i}</li>
+          ))}
+        </ul>
+        <button className="text-white bg-black p-2 rounded-md">
+          Añadir al carrito
+        </button>
+      </section>
+    )
+  );
+};
+
+export default Pizza;