Started working on the assignments page

src/components/List.tsx

@@ -1,13 +1,26 @@
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
 import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
+import clsx from "clsx";
 import {useMemo, useState} from "react";
 import Button from "./Low/Button";
 
 const SIZE = 25;
 
-export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
-	const [page, setPage] = useState(0);
+export default function List<T>({
+	data,
+	columns,
+	searchFields = [],
+	pageSize = SIZE,
+}: {
+	data: T[];
+	columns: any[];
+	searchFields?: string[][];
+	pageSize?: number;
+}) {
+	const {rows, renderSearch} = useListSearch(searchFields, data);
 
-	const items = useMemo(() => data.slice(page * SIZE, (page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE), [data, page]);
+	const {items, page, renderMinimal} = usePagination(rows, pageSize);
 
 	const table = useReactTable({
 		data: items,
@@ -17,19 +30,10 @@ export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
 	});
 
 	return (
-		<div className="w-full h-full flex flex-col gap-2">
-			<div className="w-full flex gap-2 justify-between">
-				<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
-					Previous Page
-				</Button>
-				<div className="flex items-center gap-4 w-fit">
-					<span className="opacity-80">
-						{page * SIZE + 1} - {(page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE} / {data.length}
-					</span>
-					<Button className="w-[200px]" disabled={(page + 1) * SIZE >= data.length} onClick={() => setPage((prev) => prev + 1)}>
-						Next Page
-					</Button>
-				</div>
+		<div className="w-full h-full flex flex-col gap-6">
+			<div className={clsx("w-full flex items-center gap-4", searchFields.length === 0 && "justify-end")}>
+				{searchFields.length > 0 && renderSearch()}
+				{renderMinimal()}
 			</div>
 
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">