grid-filler

1import { cn } from "@/lib/utils";
2 
3type GridFillerProps = React.ComponentProps<"div"> & {
4	/**
5	 * The number of items in the grid.
6	 */
7	totalItems: number;
8	/**
9	 * Number of columns for small screens.
10	 */
11	smColumns?: number;
12	/**
13	 * Number of columns for medium screens.
14	 */
15	mdColumns?: number;
16	/**
17	 * Number of columns for large screens.
18	 */
19	lgColumns?: number;
20};
21 
22export function GridFiller({
23	totalItems,
24	className,
25	smColumns = 2,
26	mdColumns,
27	lgColumns,
28	...props
29}: GridFillerProps) {
30	const actualMdColumns = mdColumns ?? smColumns;
31	const actualLgColumns = lgColumns ?? actualMdColumns;
32 
33	// We need enough iterations to cover the maximum possible remainder.
34	// For N columns, the remainder can be at most N-1.
35	const maxFillers = Math.max(smColumns, actualMdColumns, actualLgColumns) - 1;
36 
37	return (
38		<>
39			{Array.from({ length: maxFillers }).map((_, i) => {
40				const neededSm = (smColumns - (totalItems % smColumns)) % smColumns;
41				const neededMd =
42					(actualMdColumns - (totalItems % actualMdColumns)) % actualMdColumns;
43				const neededLg =
44					(actualLgColumns - (totalItems % actualLgColumns)) % actualLgColumns;
45 
46				const showSm = i < neededSm ? "sm:block" : "sm:hidden";
47				const showMd = i < neededMd ? "md:block" : "md:hidden";
48				const showLg = i < neededLg ? "lg:block" : "lg:hidden";
49 
50				if (
51					showSm === "sm:hidden" &&
52					showMd === "md:hidden" &&
53					showLg === "lg:hidden"
54				) {
55					return null;
56				}
57 
58				return (
59					<div
60						className={cn(
61							"pointer-events-none hidden",
62							showSm,
63							showMd,
64							showLg,
65							className
66						)}
67						key={`filler-${i}`}
68						{...props}
69					/>
70				);
71			})}
72		</>
73	);
74}