fix: abstract Catalog to ProductCards

src/App.tsx

@@ -1,10 +1,29 @@
 import './App.css'
-import { Catalog } from './pages'
+import { useEffect, useState } from "react";
+import type { Product } from './types';
+import { ProductCards } from './pages'
+
+
 function App() {
 
+  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();
+  }, []);
+
   return (
     <>
-      <Catalog/>
+      <ProductCards products={ products }/>
     </>
   )
 }

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';

src/types.ts

@@ -0,0 +1,7 @@
+export type Product = {
+  id: number;
+  name : string;
+  price: number;
+  description: string;
+  image: string;
+};