Continued creating the entity system

src/components/High/CardList.tsx

@@ -0,0 +1,32 @@
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
+import {ReactNode} from "react";
+import Checkbox from "../Low/Checkbox";
+import Separator from "../Low/Separator";
+
+interface Props<T> {
+	list: T[];
+	searchFields: string[][];
+	pageSize?: number;
+	firstCard?: () => ReactNode;
+	renderCard: (item: T) => ReactNode;
+}
+
+export default function CardList<T>({list, searchFields, renderCard, firstCard, pageSize = 20}: Props<T>) {
+	const {rows, renderSearch} = useListSearch(searchFields, list);
+
+	const {items, page, renderMinimal} = usePagination(rows, pageSize);
+
+	return (
+		<section className="flex flex-col gap-4 w-full">
+			<div className="w-full flex items-center gap-4">
+				{renderSearch()}
+				{renderMinimal()}
+			</div>
+			<div className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+				{page === 0 && !!firstCard && firstCard()}
+				{items.map(renderCard)}
+			</div>
+		</section>
+	);
+}