estilos a la pagina de pedidos

src/components/Tarjeta.tsx

@@ -1,119 +1,140 @@
 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 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",
         },
       ];
@@ -126,38 +147,60 @@ const categorias = {
   Variedades:productos.filter ((p) => p.titulo.includes("Arancinis") || p.titulo.includes("Lasagna"))
 };
 
-  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>
+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>
               </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

@@ -5,11 +5,16 @@ 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>
-  <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/Productos.models.ts

@@ -8,11 +8,10 @@
 // match the expected interface, even if the JSON is valid.
 
 export class Productos {
-    paginacion: Paginacion;
+
     resultado:  Resultado[];
 
     constructor(json?: Partial<Productos>){
-        this.paginacion = new Paginacion();
         this.resultado = [];
         if (json !== null) {
             Object.assign(this, json);
@@ -20,32 +19,16 @@ export class Productos {
     }
 }
 
-export class Paginacion {
-    total:  number;
-    pagina: number;
-    limite: number;
-    
-    constructor(json?: Partial<Productos>){
-        this.total = 0;
-        this.pagina = 0;
-        this.limite =0;
-        if (json !== null) {
-            Object.assign(this, json);
-          }
-    }
-}
 
 export class Resultado {
     id:             number;
     nombre:         string;
     precio:         string;
-    existencia:     number;
 
     constructor(json?: Partial<Productos>){
         this.id = 0;
         this.nombre = "";
         this.precio = "";
-        this.existencia = 0;
         if (json !== null) {
             Object.assign(this, json);
           }

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

@@ -1,34 +1,44 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import {Productos, Resultado} from "../../models/Productos.models"
-import productList from "../../components/Tarjeta"
-import React from "react";
+import { HttpService } from "../../services";
 import { http } from "../../services";
 import type { DefaultResponse } from "../../types/responses";
 import TarjetaAPI from "../../components/TarjetaAPI.astro";
+import ProductList from "../../components/Tarjeta";
 
-/*const contenido: DefaultResponse<Productos []> = await http.get<Productos []>(
-"https://pos.api.turquessacoffee.com/admin/test-productos/productos",
-false
-);*/
+// 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 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">
+
+  <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>
 </Layout>