devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Continued updating the code to work with entities better

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-10-07 15:49:58 +01:00
parent b5200c88fc
commit 1ef4efcacf
36 changed files with 2489 additions and 3012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/High/CardList.tsx
View File

@@ -1,5 +1,6 @@
import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import { clsx } from "clsx";
import {ReactNode} from "react";
import Checkbox from "../Low/Checkbox";
import Separator from "../Low/Separator";
@@ -10,20 +11,21 @@ interface Props<T> {
pageSize?: number;
firstCard?: () => ReactNode;
renderCard: (item: T) => ReactNode;
className?: string
}
export default function CardList<T>({list, searchFields, renderCard, firstCard, pageSize = 20}: Props<T>) {
export default function CardList<T>({list, searchFields, renderCard, firstCard, className, pageSize = 20}: Props<T>) {
const {rows, renderSearch} = useListSearch(searchFields, list);
const {items, page, renderMinimal} = usePagination(rows, pageSize);
const {items, page, render, 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()}
{searchFields.length > 0 && renderSearch()}
{searchFields.length > 0 ? renderMinimal() : render()}
</div>
<div className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div className={clsx("w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", className)}>
{page === 0 && !!firstCard && firstCard()}
{items.map(renderCard)}
</div>