From 988bfdec2662878c21c013d6279ee24324e95eb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eline=20J=C3=A5sund?= Date: Fri, 9 Oct 2026 11:00:18 +0200 Subject: [PATCH 1/6] feat: implement pagination on mock data --- src/css/searchpage.css | 13 +++++++++++++ src/pages/searchpage.tsx | 30 ++++++++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/src/css/searchpage.css b/src/css/searchpage.css index a1ebca4..3552c6b 100644 --- a/src/css/searchpage.css +++ b/src/css/searchpage.css @@ -74,3 +74,16 @@ background-color: var(--secondary-component-color); color: var(--primary-accent-color); } + +.games-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 4rem; + padding: 2rem; + align-self: center; +} + +.pageinationSearch { + align-self: center; + padding-bottom: 1rem; +} diff --git a/src/pages/searchpage.tsx b/src/pages/searchpage.tsx index 1a6f30e..e009cb7 100644 --- a/src/pages/searchpage.tsx +++ b/src/pages/searchpage.tsx @@ -1,10 +1,12 @@ import '../css/searchpage.css' import Header from '../components/header' import Footer from '../components/footer' -import { TextField, Button, ButtonGroup } from '@mui/material' +import { TextField, Button, ButtonGroup, Pagination } from '@mui/material' import { Funnel } from 'lucide-react' -import { useState } from 'react' +import { useMemo, useState } from 'react' import PageHeading from '../components/pageheading' +import { games } from '../api/games' +import PassiveGameCard from '../components/passivegamecard' export function SearchPage() { const [isFilterActive, setIsFilterActive] = useState(false) @@ -22,6 +24,19 @@ export function SearchPage() { setActiveFilterButton((activeIndex) => (activeIndex === index ? null : index)) } + //decides games per page and makes a constant for the pagination + const gamesPerPage = 3 + const pageCount = Math.ceil(games.length / gamesPerPage) + + const [page, setPage] = useState(1) + + //To change which games are displayed change games to backend import + const visibleGames = useMemo(() => { + const start = (page - 1) * gamesPerPage + + return games.slice(start, start + gamesPerPage) + }, [games, page]) + return (
@@ -71,6 +86,17 @@ export function SearchPage() {
)} +
+ {visibleGames.map((game) => ( + + ))} +
+ setPage(value)} + />