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({
- {/* Catálogo de objetos */} -
- {catalog.map((cat) => ( -
-

{cat.name}

-
- {cat.items.map((it) => ( -
- - {it.name} - -
{it.name}
-
- {it.price} {currency} -
- -
- ))} + {/* Catálogo de objetos: cuadrícula centrada de 4 por fila + paginación */} +

Objetos disponibles

+
+ {pageItems.map((it) => ( +
+ + {it.name} + +
{it.category}
+
{it.name}
+
+ {it.price} {currency}
+
))}
+ {totalPages > 1 && ( +
+ + {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => ( + + ))} + +
+ )}
{/* 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;