Removed sorting in exchange for filtering

src/hooks/usePagination.tsx

@@ -0,0 +1,28 @@
+import Button from "@/components/Low/Button";
+import {useMemo, useState} from "react";
+
+export default function usePagination<T>(list: T[], size = 25) {
+	const [page, setPage] = useState(0);
+
+	const items = useMemo(() => list.slice(page * size, (page + 1) * size), [page, size, list]);
+
+	const render = () => (
+		<div className="w-full flex gap-2 justify-between items-center">
+			<div className="flex items-center gap-4 w-fit">
+				<Button className="w-[200px] h-fit" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
+					Previous Page
+				</Button>
+			</div>
+			<div className="flex items-center gap-4 w-fit">
+				<span className="opacity-80">
+					{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
+				</span>
+				<Button className="w-[200px]" disabled={(page + 1) * size >= list.length} onClick={() => setPage((prev) => prev + 1)}>
+					Next Page
+				</Button>
+			</div>
+		</div>
+	);
+
+	return {page, items, setPage, render};
+}