feat: Initial Catalog

src/App.tsx

@@ -1,9 +1,10 @@
 import './App.css'
-
+import { Catalog } from './pages'
 function App() {
 
   return (
     <>
+      <Catalog/>
     </>
   )
 }

src/pages/catalog/catalog.tsx

@@ -0,0 +1,47 @@
+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/components/card/card.tsx

@@ -0,0 +1,31 @@
+type CardProps = {
+  image: string;
+  name: string;
+  price: number;
+  description: string;
+  cardId: number
+}
+
+
+const Card = ({ image, name, price, description, cardId } : CardProps) => {
+  return (
+    <div key={cardId}>
+        <div>
+          <img src={`${image}`} alt="Imagen"/>
+        </div>
+
+        <div>
+          <p>{name}</p>
+          <p>{price}</p>
+          <p>{description}</p>
+        </div>
+
+        <div>
+          <button>Conocer Origen</button>
+          <button>Agregar</button>
+        </div>
+      </div>
+  )
+}
+
+export default Card;

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

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

src/pages/catalog/components/index.ts

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

src/pages/catalog/index.ts

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

src/pages/index.ts

@@ -0,0 +1 @@
+export * from './catalog/';