feat: agregar página de pizza

backend

@@ -1 +1 @@
-Subproject commit 01bc0087cc8a4d3eae81a757a34e19129ee4ed76
+Subproject commit d86ee9ce553a0421211a48bacce8a2ea49b69c5d

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

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 />

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;