diff --git a/client/src/pages/recipes.tsx b/client/src/pages/recipes.tsx index f269508..b135830 100644 --- a/client/src/pages/recipes.tsx +++ b/client/src/pages/recipes.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, Fragment } from "react"; import { useQuery } from "@tanstack/react-query"; import { ChefHat, X, Calendar } from "lucide-react"; import { usePageMeta } from "@/hooks/use-page-meta"; @@ -43,6 +43,8 @@ export default function RecipesPage() { "Das Rezept des Tages und alle bisherigen Rezepte aus der Alpenküche bei FOLX TV — österreichische, bayerische und schweizer Hausmannskost." ); const [selected, setSelected] = useState(null); + const [page, setPage] = useState(0); + const PAGE_SIZE = 12; const { data = [], isLoading } = useQuery({ queryKey: ["/api/recipes"], @@ -51,6 +53,13 @@ export default function RecipesPage() { const today = data[0]; const rest = data.slice(1); + const totalPages = Math.max(1, Math.ceil(rest.length / PAGE_SIZE)); + const pageItems = rest.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE); + + const goPage = (p: number) => { + setPage(Math.max(0, Math.min(totalPages - 1, p))); + document.getElementById("rezept-archiv")?.scrollIntoView({ behavior: "smooth", block: "start" }); + }; return (
@@ -96,16 +105,24 @@ export default function RecipesPage() { {rest.length > 0 && ( -
+

Alle Rezepte

+

+ {rest.length} Rezepte · Seite {page + 1} von {totalPages} +

- {rest.map((r) => ( + {pageItems.map((r, idx) => ( + + {idx > 0 && idx % 4 === 0 && ( +
+ +
+ )}
+ ))}
+ + {totalPages > 1 && ( +
+ + {Array.from({ length: totalPages }).map((_, i) => ( + + ))} + +
+ )}
)}