chore: Create Catalog Page

src/App.tsx

@@ -1,29 +1,11 @@
 import './App.css'
-import { useEffect, useState } from "react";
+import Catalog from './pages/catalog/Catalog'
-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 (
     <>
-      <ProductCards products={ products }/>
+      <Catalog/>
     </>
   )
 }

src/pages/catalog/Catalog.tsx

@@ -0,0 +1,30 @@
+import { ProductCards } from "./components";
+import { useEffect, useState } from "react";
+import type { Product } from "../../types";
+
+
+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();
+  }, []);
+
+
+  return (
+    <>
+      <ProductCards products={products}/>
+    </>
+  )
+}
+
+export default Catalog;

src/pages/catalog/components/index.ts

@@ -1,2 +1,3 @@
 export * from './card/';
+export * from './product_cards/';
 export * from './index';

src/pages/catalog/components/product_cards/ProductCards.tsx

@@ -1,5 +1,5 @@
-import { Card } from "./components";
+import Card from '../card/card.tsx';
-import type { Product } from '../../types.ts'
+import type { Product } from '../../../../types.ts'
 
 type ProductCardProps = {
   products: Product[];

src/pages/catalog/components/product_cards/index.ts

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

src/pages/catalog/index.ts

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