pruebas

src/components/prueba.astro

@@ -0,0 +1,14 @@
+---
+interface props{
+    nombre: string;
+    precio: number;
+
+}
+
+const {nombre, precio} = Astro.props;
+---
+
+<div>
+    <h1>{nombre}</h1>
+    <h4>{precio}</h4>
+</div>

src/layouts/Layout.astro

@@ -136,6 +136,7 @@ const { title, ogTitle, ogImage, ogUrl, ogDescription } = Astro.props;
     }
     html {
       font-family: system-ui, sans-serif;
+      scroll-behavior: smooth;
     }
     code {
       font-family:

src/pages/Productos/index.astro

@@ -1,36 +1,33 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import ProductList from "../../components/Tarjeta";
-import {Productos} from "../../models/Productos.models"
-import type { DefaultResponse } from "../../types/responses";
+import {Productos, Resultado} from "../../models/Productos.models"
+import productList from "../../components/Tarjeta"
+import React from "react";
 import { http } from "../../services";
+import type { DefaultResponse } from "../../types/responses";
+import ProductList from "../../components/Tarjeta";
+import prueba from "../../components/Tarjeta";
 
-const resp = await fetch("https://pos.api.turquessacoffee.com/admin/test-productos/productos");
-const data = (await resp.json()) as Productos;
 
+const contenido: DefaultResponse<Productos []> = await http.get<Productos []>(
+"https://pos.api.turquessacoffee.com/admin/test-productos/productos",
+false
+);
 
 
+const ListadoProductos = contenido.resultado as Productos [];
 ---
 
 <Layout title="Productos" client:load>
-  
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    {ListadoProductos && ListadoProductos.map((producto) => (
+      <prueba
+       nombre={producto.resultado.map((producto) => producto.nombre)}
+       
+      />
+    ))}
 
-  <h1 class="font-bold text-slate-800 text-2xl mb-8">Listado de productos</h1>
-  
-  <div class="grid grid-cols-2">
-    
-  
-  <ul class="">
-      {data.resultado.map((Productos) => <li>{Productos.nombre}</li>)}
-    </ul>
-
-    <ul class="">
-      {data.resultado.map((Productos) => <li>{Productos.precio}</li>)}
-    </ul>
-    
   
   </div>
-  
 
-  
-</Layout>
+</Layout>