fix: abstract Catalog to ProductCards

src/pages/catalog/ProductCards.tsx

@@ -0,0 +1,27 @@
+import { Card } from "./components";
+import type { Product } from '../../types.ts'
+
+type ProductCardProps = {
+  products: Product[];
+}
+
+const ProductCards = ({ products } : ProductCardProps) => {
+
+  return (
+    <>
+      { products.map((product) => {
+        return (
+          <Card
+            image={product.image}
+            name={product.name}
+            price={product.price}
+            description={ product.description}
+            cardId={product.id}
+          />
+        )
+      }) }
+    </>
+  )
+}
+
+export default ProductCards;

src/pages/catalog/catalog.tsx

@@ -1,47 +0,0 @@
-import { useEffect, useState } from "react";
-import { Card } from "./components";
-
-type Product = {
-  id: number;
-  name : string;
-  price: number;
-  description: string;
-  image: string;
-};
-
-const Catalog = () => {
-
-  const [products, setProducts] = useState<Product[]>([]);
-
-  useEffect(() => {
-    async function fetchProducts(){
-      try{
-        const response = await fetch("http://localhost:8010/api/v1/products");
-        const data = await response.json();
-        setProducts(data);
-      }catch(error){
-        console.error(`Este es el error: ${error}`);
-      };
-    };
-    fetchProducts();
-  }, []);
-
-  console.log(products);
-  return (
-    <>
-      { products.map((product) => {
-        return (
-          <Card
-            image={product.image}
-            name={product.name}
-            price={product.price}
-            description={ product.description}
-            cardId={product.id}
-          />
-        )
-      }) }
-    </>
-  )
-}
-
-export default Catalog;

src/pages/catalog/index.ts

@@ -1 +1 @@
-export { default as Catalog} from './catalog.tsx';
+export { default as ProductCards} from './ProductCards.tsx';