From 9b1f1ecf6353140022fcfe858c146c5a2d0405fe Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Tue, 14 Jul 2026 13:56:25 +0000
Subject: [PATCH] =?UTF-8?q?send-gift:=20cuadr=C3=ADcula=20de=20objetos=204?=
 =?UTF-8?q?/fila=20centrada=20+=20paginaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aplana el catálogo y lo pagina (8 por página = 2 filas de 4) con controles
Atrás / 1 2 3 / Siguiente centrados. Nuevas clases .gift-grid (grid 4 cols,
responsive a 2 en móvil) y .gift-pagination en novawow-style.css.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/components/SendGiftForm.tsx          | 70 ++++++++++++-------
 .../nw-themes/nw-ryu/nw-css/novawow-style.css | 35 ++++++++++
 2 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/web-next/components/SendGiftForm.tsx b/web-next/components/SendGiftForm.tsx
index 16f6ab4..a29ab67 100644
--- a/web-next/components/SendGiftForm.tsx
+++ b/web-next/components/SendGiftForm.tsx
@@ -65,6 +65,17 @@ export function SendGiftForm({
     [cart],
   )
 
+  // Catálogo aplanado y paginado: 4 objetos por fila, 2 filas (8) por página.
+  const PAGE_SIZE = 8
+  const allItems = useMemo(
+    () => catalog.flatMap((c) => c.items.map((it) => ({ ...it, category: c.name }))),
+    [catalog],
+  )
+  const [page, setPage] = useState(1)
+  const totalPages = Math.max(1, Math.ceil(allItems.length / PAGE_SIZE))
+  const currentPage = Math.min(page, totalPages)
+  const pageItems = allItems.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+
   function addItem(item: GiftItem) {
     setCart((prev) => {
       const next = new Map(prev)
@@ -158,34 +169,45 @@ export function SendGiftForm({
         <SecretInput value={token} onChange={setToken} placeholder="Token de seguridad" />
         <hr />
 
-        {/* Catálogo de objetos */}
-        <div className="justified">
-          {catalog.map((cat) => (
-            <div key={cat.id}>
-              <h3 className="first-brown">{cat.name}</h3>
-              <div>
-                {cat.items.map((it) => (
-                  <div className="item-box" key={it.id}>
-                    <a
-                      href={`https://www.wowhead.com/wotlk/item=${it.itemId}`}
-                      target="_blank"
-                      rel="noreferrer noopener"
-                    >
-                      <img className="item-img-box" src={it.imageUrl} alt={it.name} />
-                    </a>
-                    <div className="item-name second-brown">{it.name}</div>
-                    <div className="yellow-info">
-                      {it.price} {currency}
-                    </div>
-                    <button type="button" className="store-add-button" onClick={() => addItem(it)}>
-                      Añadir
-                    </button>
-                  </div>
-                ))}
+        {/* Catálogo de objetos: cuadrícula centrada de 4 por fila + paginación */}
+        <h3 className="first-brown centered">Objetos disponibles</h3>
+        <div className="gift-grid">
+          {pageItems.map((it) => (
+            <div className="item-box" key={it.id}>
+              <a href={`https://www.wowhead.com/wotlk/item=${it.itemId}`} target="_blank" rel="noreferrer noopener">
+                <img className="item-img-box" src={it.imageUrl} alt={it.name} />
+              </a>
+              <div className="third-brown" style={{ fontSize: '12px' }}>{it.category}</div>
+              <div className="item-name second-brown">{it.name}</div>
+              <div className="yellow-info">
+                {it.price} {currency}
               </div>
+              <button type="button" className="store-add-button" onClick={() => addItem(it)}>
+                Añadir
+              </button>
             </div>
           ))}
         </div>
+        {totalPages > 1 && (
+          <div className="gift-pagination">
+            <button type="button" onClick={() => setPage((p) => Math.max(1, Math.min(totalPages, p) - 1))} disabled={currentPage === 1}>
+              Atrás
+            </button>
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
+              <button
+                type="button"
+                key={n}
+                className={n === currentPage ? 'active-page' : ''}
+                onClick={() => setPage(n)}
+              >
+                {n}
+              </button>
+            ))}
+            <button type="button" onClick={() => setPage((p) => Math.min(totalPages, Math.min(totalPages, p) + 1))} disabled={currentPage === totalPages}>
+              Siguiente
+            </button>
+          </div>
+        )}
         <hr />
 
         {/* Carrito */}
diff --git a/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css b/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css
index 24d262c..3d115ef 100644
--- a/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css
+++ b/web-next/public/nw-themes/nw-ryu/nw-css/novawow-style.css
@@ -1957,6 +1957,41 @@ th {
     display: none;
 }
 
+/* Enviar regalo: cuadrícula de objetos (4 por fila) centrada + paginación */
+.gift-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 160px);
+    gap: 10px;
+    justify-content: center;
+    margin: 0 auto;
+}
+
+.gift-grid .item-box {
+    width: auto;
+    margin: 0;
+}
+
+.gift-pagination {
+    text-align: center;
+    margin-top: 12px;
+}
+
+.gift-pagination button {
+    width: auto;
+    min-width: 34px;
+    padding: 4px 10px;
+    margin: 0 3px;
+}
+
+.gift-pagination button.active-page {
+    font-weight: bold;
+    color: #d79602;
+}
+
+@media (max-width: 700px) {
+    .gift-grid { grid-template-columns: repeat(2, 160px); }
+}
+
 /* Font Awesome */
 .fa-caret-down {
     color: #7e8d09;