src/components/Tarjeta.tsx

@@ -1,140 +1,119 @@
 import React from "react";
-import { useState } from "react";
 import { Productos } from "../models/Productos.models";
 
 interface ProductListProps {
   productos: Productos;
 }
 
-const ProductList = () => {
-    const [selectedProducts, setSelectedProducts] = useState<string[]>([]);
-
 
+const ProductList = () => {
     const productos = [
         {
           id: 1,
           titulo: "Focaccia chicken parm",
           descripcion: "Focaccia con aceite de oliva y romero fresco.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Clasica",
         },
         {
           id: 2,
           titulo: "Focaccia meatballs",
           descripcion: "Focaccia cubierta con tomates cherry y hierbas.",
-          precio: 120,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Tomate",
         },
         {
           id: 3,
           titulo: "Focaccia caprese",
           descripcion: "Focaccia con aceitunas negras y verdes.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 4,
           titulo: "Focaccia pavo romesco",
           descripcion: "Focaccia con aceitunas negras y verdes.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 5,
           titulo: "Focaccia griega",
           descripcion: "Focaccia con aceitunas negras y verdes.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
         },
         {
           id: 6,
           titulo: "Spaghetti carbonara",
           descripcion: "Fideos con salsa Alfredo cremosa.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Alfredo",
         },
         {
           id: 7,
           titulo: "Spaghetti bolognesa",
           descripcion: "Pasta con salsa bolognesa clásica.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
         },
         {
           id: 8,
           titulo: "Spaghetti meatballs",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 9,
           titulo: "Spaghetti chicken parm",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 10,
           titulo: "Fettuccine alfredo",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 11,
           titulo: "Fettuccine toscana",
           descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
         },
         {
           id: 12,
           titulo: "Sopa toscana",
           descripcion: "Pasta con vegetales frescos y un toque de limón.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Pasta+Primavera",
         },
         {
           id: 13,
           titulo: "Sopa tomate",
           descripcion: "Lechuga romana, crutones y aderezo César.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
         },
         {
           id: 14,
           titulo: "Ensalada oliva",
           descripcion: "Tomates, pepino, cebolla y queso feta.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
         },
         {
           id: 15,
           titulo: "Ensalada mediterranea",
           descripcion: "Quinoa con verduras frescas y aderezo ligero.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
         },
         {
           id: 16,
           titulo: "Ensalada cesar",
           descripcion: "Mozzarella fresca, tomate y albahaca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
         {
           id: 17,
           titulo: "Arancinis",
           descripcion: "Mozzarella fresca, tomate y albahaca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
         {
           id: 18,
           titulo: "Lasagna Italiana",
           descripcion: "Mozzarella fresca, tomate y albahaca.",
-          precio: 150,
           imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
         },
       ];
@@ -147,60 +126,38 @@ const categorias = {
   Variedades:productos.filter ((p) => p.titulo.includes("Arancinis") || p.titulo.includes("Lasagna"))
 };
 
-const handleAddProduct = (titulo: string, precio:number) => {
-  setSelectedProducts((prev) => [...prev, titulo]);
-};
-
-return (
-  <div className="mx-6 mb-10 md:mx-10">
-    {Object.entries(categorias).map(([categoria, productos]) => (
-      <div key={categoria} className="mb-10">
-        <h2 className="text-2xl font-bold text-slate-800 mb-4">{categoria}</h2>
-        <hr className="mb-6 border-2 border-lime-700" />
-        <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-          {productos.map((producto) => (
-            <div
-              key={producto.id}
-              className="shadow-xl w-full rounded-lg overflow-hidden bg-white"
-            >
-              <img
-                src={producto.imagen}
-                alt={producto.titulo}
-                className="w-full h-48 object-cover rounded-t-lg"
-              />
-              <div className="p-5">
-                <h1 className="text-xl font-bold text-lime-700 mb-2 ml-2">
-                  {producto.titulo}
-                </h1>
-                <p className="text-gray-600 text-sm ml-2 mb-3">
-                  {producto.descripcion}
-                </p>
-                <button
-                  className="bg-lime-700 text-white rounded px-3 py-1 hover:bg-lime-800 hover:scale-105 duration-200"
-                  onClick={() => handleAddProduct(producto.titulo, producto.precio)}
-                >
-                  Agregar
-                </button>
+  return (
+    <div className="mx-6 mb-10 md:mx-10">
+      {Object.entries(categorias).map(([categoria, productos]) => (
+        <div key={categoria} className="mb-10">
+          <h2 className="text-2xl font-bold text-slate-800 mb-4">{categoria}</h2>
+          <hr className="mb-6 border-2 border-lime-700" />
+          <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+            {productos.map((producto) => (
+              <div
+                key={producto.id}
+                className="shadow-xl w-full rounded-lg overflow-hidden bg-white"
+              >
+                <img
+                  src={producto.imagen}
+                  alt={producto.titulo}
+                  className="w-full h-48 object-cover rounded-t-lg"
+                />
+                <div className="p-5">
+                  <h1 className="text-xl font-bold text-lime-700 mb-2 ml-2">
+                    {producto.titulo}
+                  </h1>
+                  <p className="text-gray-600 text-sm ml-2 mb-3">
+                    {producto.descripcion}
+                  </p>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
-      </div>
-    ))}
-    <div className="mt-10">
-      <h2 className="text-xl font-bold text-slate-800 mb-4">Productos seleccionados:</h2>
-      {selectedProducts.length === 0 ? (
-        <p className="text-gray-600">No has seleccionado ningún producto.</p>
-      ) : (
-        <ul className="list-disc pl-6 text-gray-800">
-          {selectedProducts.map((producto, index) => (
-            <li key={index}>{producto}</li>
-          ))}
-        </ul>
-      )}
+      ))}
     </div>
-  </div>
-);
+  );
 };
 
-export default ProductList;
+export default ProductList;

src/components/TarjetaAPI.astro

@@ -12,9 +12,5 @@ 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>
-
-  <button class="bg-lime-700 text-white mt-7 rounded px-3 py-1 hover:bg-slate-500">Agregar</button>
-
-
-
+  <button class="bg-lime-700 text-white mt-7 rounded px-3 py-1 hover:bg-slate-500">agregar</button>
 </div>

src/models/Producto.models.ts

@@ -0,0 +1,10 @@
+export class Producto {
+  id: number|undefined; 
+  nombre: string|undefined;
+  precio: string|undefined;
+  existencia: number|undefined;
+
+  constructor(json?: Partial<Producto>) {
+    Object.assign(this, json);
+  }
+}

src/models/Productos.models.ts

@@ -1,39 +0,0 @@
-// To parse this data:
-//
-//   import { Convert, Productos } from "./file";
-//
-//   const productos = Convert.toProductos(json);
-//
-// These functions will throw an error if the JSON doesn't
-// match the expected interface, even if the JSON is valid.
-
-export class Productos {
-
-    resultado:  Resultado[];
-
-    constructor(json?: Partial<Productos>){
-        this.resultado = [];
-        if (json !== null) {
-            Object.assign(this, json);
-          }
-    }
-}
-
-
-export class Resultado {
-    id:             number;
-    nombre:         string;
-    precio:         string;
-
-    constructor(json?: Partial<Productos>){
-        this.id = 0;
-        this.nombre = "";
-        this.precio = "";
-        if (json !== null) {
-            Object.assign(this, json);
-          }
-    }
-}
-
-// Converts JSON strings to/from your types
-// and asserts the results of JSON.parse at runtime

src/models/Publicacion.model.ts

@@ -1,21 +1,13 @@
 export class Publicacion {
-  id: string;
-  foto: string;
-  titulo: string;
-  descripcion: string;
-  contenido: string;
-  fecha: string;
+  id: string | undefined;
+  foto: string | undefined;
+  titulo: string | undefined;
+  descripcion: string | undefined;
+  contenido: string | undefined;
+  fecha: string | undefined;
 
   constructor(json?: Partial<Publicacion>) {
-    this.id = "";
-    this.foto = "";
-    this.titulo = "";
-    this.descripcion = "";
-    this.contenido = "";
-    this.fecha = "";
-    if (json !== null) {
-      Object.assign(this, json);
-    }
+    Object.assign(this, json);
   }
 
   static fromJson(json: Partial<Publicacion>) {

src/pages/Productos/index.astro

@@ -1,44 +1,22 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import {Productos, Resultado} from "../../models/Productos.models"
-import { HttpService } from "../../services";
+import { Producto } from "../../models/Producto.models";
 import { http } from "../../services";
-import type { DefaultResponse } from "../../types/responses";
 import TarjetaAPI from "../../components/TarjetaAPI.astro";
-import ProductList from "../../components/Tarjeta";
-
-// const res = await http.get<Productos []>(
-// "https://pos.api.turquessacoffee.com/admin/test-productos/productos",
-// false
-// );
-
-// const productos = res.resultado as Productos[];
-
-const resp = await fetch("https://pos.api.turquessacoffee.com/admin/test-productos/productos");
-const data = (await resp.json()) as Productos;
 
 
+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-3 gap-6">
-   
-    {data.resultado.map((producto) => (
-      <TarjetaAPI
-        nombre={producto.nombre}
-        precio={producto.precio}
-      />
-    ))}
-
-
-    <!-- {res.resultado?.map((productos: Productos) => (
-      <TarjetaAPI
-        nombre={productos.resultado[0].nombre}
-        precio={productos.resultado[0].precio}
-      />
-    ))} -->
-  </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+   {productos.map(productos => (
+      <TarjetaAPI 
+      nombre={productos.nombre || ""} 
+      precio={productos.precio || ""} />
+    ))} 
+  
 </Layout>

src/services/httpService.ts

@@ -17,7 +17,7 @@ export interface IRequest {
   body: any;
 }
 
-const API_URL = "https://upreson.api.edesarrollos.info/";
+const API_URL = "https://pos.api.turquessacoffee.com/";
 
 export interface IHttpService {
   get: <T>(
@@ -139,6 +139,7 @@ export class HttpService implements IHttpService {
       headers: HttpService.DEFAULT_HEADERS(),
     });
 
+    console.log("response", _response);
     const response = (await _response.json()) as DefaultResponse<T>;
 
     return {