feat: implement dynamic page sizing on the Home page based on window dimensions.

src/hooks/useDynamicPageSize.ts

@@ -0,0 +1,20 @@
+import useWindowDimensions from "@/hooks/useWindowDimensions.ts";
+
+export const useDynamicPageSize = (rows = 4) => {
+    const { width } = useWindowDimensions();
+
+    if (width >= 1280) {
+        // xl: 5 columns
+        return 5 * rows;
+    }
+    if (width >= 1024) {
+        // lg: 4 columns
+        return 4 * rows;
+    }
+    if (width >= 768) {
+        // md: 3 columns
+        return 3 * rows;
+    }
+    // default: 2 columns
+    return 2 * rows;
+};

src/hooks/useWindowDimensions.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+
+export default function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(
+        getWindowDimensions(),
+    );
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return windowDimensions;
+}

src/pages/Home.tsx

@@ -13,10 +13,13 @@ import {
 	SortDropdown,
 } from "@/features/home/components/SortDropdown.tsx";
 import { useUIState } from "@/contexts/UIStateContext.tsx";
+import { useDynamicPageSize } from "@/hooks/useDynamicPageSize.ts";
+
+const ROWS_PER_PAGE = 4;
 
-const ITEMS_PER_PAGE = 12;
 
 const Home = () => {
+	const itemsPerPage = useDynamicPageSize(ROWS_PER_PAGE);
 	const {
 		currentPage,
 		setCurrentPage,
@@ -40,7 +43,7 @@ const Home = () => {
 
 	const { data: mangasData, queryKey: mangasQueryKey } = useGetMangas({
 		page: currentPage - 1,
-		size: ITEMS_PER_PAGE,
+		size: itemsPerPage,
 		sort: ["id"],
 		searchQuery: debouncedSearchText,
 		statuses: selectedStatus,
@@ -122,9 +125,9 @@ const Home = () => {
 							{mangasData.data?.totalElements && (
 								<div className="mb-6 flex items-center justify-between">
 									<p className="text-sm text-muted-foreground">
-										Showing {(currentPage - 1) * ITEMS_PER_PAGE + 1} to{" "}
+										Showing {(currentPage - 1) * itemsPerPage + 1} to{" "}
 										{Math.min(
-											currentPage * ITEMS_PER_PAGE,
+											currentPage * itemsPerPage,
 											mangasData.data.totalElements,
 										)}{" "}
 										of {mangasData.data.totalElements}