Component Multiplier

1/**
2 * Renders multiple instances of a given component, e.g. for testing purposes.
3 * @param component - The component to be multiplied.
4 * @param multiplier - The number of times the component should be rendered.
5 * @returns The multiplied components.
6 */
7export default function ComponentMultiplier({
8	component,
9	multiplier,
10}: {
11	component: JSX.Element;
12	multiplier: number;
13}) {
14	return (
15		<>
16			{Array.from({ length: multiplier })?.map((_, i) => ({
17				...component,
18				key: i,
19			}))}
20		</>
21	);
22}

1import {ComponentMultiplier} from '@/components/component-multiplier'
2
3/*
4 * This is a simple example of a component.
5 */
6const SquareComponent = () => {
7	return <div className=" h-6 w-6 mx-2 bg-black" />;
8};
9
10export default function Page(){
11  return(
12    <ComponentMultiplier component={SquareComponent} multiplier={4}/>
13  )
14}