refactor: hacer el código mas DRY

src/Home.jsx

@@ -4,30 +4,38 @@ import española from "./assets/española.jpg";
 import pepperoni from "./assets/pepperoni.jpg";
 import CardPizza from "./components/CardPizza";
 
-const Home = () => (
+const pizzas = [
-	<section id="home" className="w-full flex flex-col gap-4 pb-4">
+	{
-		<Header />
+		name: "Napolitana",
-		<div className="flex gap-4">
+		price: 5950,
-			<CardPizza
+		ingredients: ["mozzarella", "tomates", "jamón", "orégano"],
-				name="Napolitana"
+		img: napolitana,
-				price={5950}
+	},
-				ingredients={["mozzarella", "tomates", "jamón", "orégano"]}
+	{
-				img={napolitana}
+		name: "Española",
-			/>
+		price: 6950,
-			<CardPizza
+		ingredients: ["mozzarella", "gorgonzola", "parmesano", "provolone"],
-				name="Española"
+		img: española,
-				price={6950}
+	},
-				ingredients={["mozzarella", "gorgonzola", "parmesano", "provolone"]}
+	{
-				img={española}
+		name: "Pepperoni",
-			/>
+		price: 6950,
-			<CardPizza
+		ingredients: ["mozzarella", "pepperoni", "orégano"],
-				name="Pepperoni"
+		img: pepperoni,
-				price={6950}
+	},
-				ingredients={["mozzarella", "pepperoni", "orégano"]}
+];
-				img={pepperoni}
+
-			/>
+const Home = () => {
-		</div>
+	return (
-	</section>
+		<section id="home" className="w-full flex flex-col gap-4 pb-4">
-);
+			<Header />
+			<div className="flex gap-4">
+				{pizzas.map((pizza) => (
+					<CardPizza {...pizza} />
+				))}
+			</div>
+		</section>
+	);
+};
 
 export default Home;