import type { SortPayload } from "ra-core"; import { useResourceContext, useGetList, useTimeout, useCreatePath, } from "ra-core"; import { CircleX, LoaderCircle } from "lucide-react"; import { Link } from "react-router"; /** * Fetches and displays the item count for a resource. * * Uses dataProvider.getList() with minimal pagination to fetch the total count. * Displays a loading spinner while fetching and an error icon on failure. * By default, uses the current resource from ResourceContext. * * @see {@link https://marmelab.com/shadcn-admin-kit/docs/count/ Count documentation} * * @example * import { Count } from '@/components/admin'; * // Display the number of records in the current resource * * * @example * // Display the number of posts * * * @example * // Display the number of published posts with a link * */ export const Count = (props: CountProps) => { const { filter, sort, link, // eslint-disable-next-line @typescript-eslint/no-unused-vars resource: resourceFromProps, timeout = 1000, ...rest } = props; const resource = useResourceContext(props); if (!resource) { throw new Error( "The Count component must be used inside a ResourceContext or must be passed a resource prop.", ); } const oneSecondHasPassed = useTimeout(timeout); const createPath = useCreatePath(); const { total, isPending, error } = useGetList(resource, { filter, sort, pagination: { perPage: 1, page: 1 }, }); const body = isPending ? ( oneSecondHasPassed ? ( ) : ( "" ) ) : error ? ( ) : ( total ); return link ? ( e.stopPropagation()} {...rest} > {body} ) : ( {body} ); }; export interface CountProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any filter?: any; sort?: SortPayload; link?: boolean; resource?: string; timeout?: number; }