se utilizo una api para productos

src/components/TarjetaAPI.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  nombre: string;
+  precio: string;
+}
+
+const { nombre, precio } = Astro.props;
+---
+
+<div class="bg-white shadow-lg rounded-lg p-6 text-gray-900 hover:shadow-xl transform hover:scale-105 transition duration-300 mx-3 my-2">
+  <h2 class="text-xl font-semibold mb-2 text-gray-800">{nombre}</h2>
+  <p class="text-lg text-gray-600">{precio}</p>
+</div>

src/components/prueba.astro

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

src/pages/Productos/index.astro

@@ -5,29 +5,30 @@ 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";
+import TarjetaAPI from "../../components/TarjetaAPI.astro";
 
-
-const contenido: DefaultResponse<Productos []> = await http.get<Productos []>(
+/*const contenido: DefaultResponse<Productos []> = await http.get<Productos []>(
 "https://pos.api.turquessacoffee.com/admin/test-productos/productos",
 false
-);
+);*/
+
+const resp = await fetch("https://pos.api.turquessacoffee.com/admin/test-productos/productos");
+const data = (await resp.json()) as Productos;
 
 
-const ListadoProductos = contenido.resultado as Productos [];
+//const ListadoProductos = contenido.resultado;
+//const paginacion = contenido.paginacion?.total;
 ---
 
+
 <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)}
-       
+    {data.resultado.map((producto) => (
+      <TarjetaAPI
+        nombre={producto.nombre}
+        precio={producto.precio}
+  
       />
     ))}
-
-  
   </div>
-
 </Layout>