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