se formateo el codigo

src/components/TarjetaAPI.astro

@@ -5,8 +5,10 @@ interface Props {
 }
 
 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>

src/pages/Pedidos/index.astro

@@ -1,8 +1,22 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import TarjetaAPI from "../../components/TarjetaAPI.astro";
 ---
 
 <Layout title="Pedidos">
-  
+  <div class="grid grid-cols-2 p-10 pb-36 my-10 mx-10 bg-white rounded-2xl shadow-lg">
+
+    <div class="">
+      <h1 class="text-2xl font-bold text-center">Pedidos</h1>
+      <p class="text-sm text-gray-500"></p>
+    </div>
+
+
+    <div class="">
+      <h1 class="text-2xl font-bold text-center">Total</h1>
+    </div>
+
+
+  </div>
 
 </Layout>

src/pages/Productos/index.astro

@@ -4,21 +4,19 @@ import { Producto } from "../../models/Producto.models";
 import { http } from "../../services";
 import TarjetaAPI from "../../components/TarjetaAPI.astro";
 
+
 const res = await http.get("admin/test-productos/productos");
 const productos = res.resultado as Producto[];
+
 ---
 
 
 <Layout title="Productos" client:load>
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    {productos.map((producto) => (
-    <TarjetaAPI
-        nombre={producto.nombre || ""}
-        precio={producto.precio || ""}
+   {productos.map(productos => (
+      <TarjetaAPI 
+      nombre={productos.nombre || ""} 
+      precio={productos.precio || ""} />
+    ))} 
   
-      />
-    ))}
-
-
-  </div>
 </Layout>