buzzword-bingo/src/app/components/bingo.tsx

import BingoRow from './bingorow'

interface Props{
	size: number;
	items: string[];
}

export default function Bingo({size, items}: Props){
	const activeItems: string[] = items.slice(0, size*size);
	let rows: string[][] = [];
	for(let i = 0; i < (activeItems.length / size); i++)
	{
		rows[i] = activeItems.slice(i * size, (i + 1) * size);
	}
	return(
		<table className='w-1/2 table table-xs sm:table-sm md:table-md bg-primary text-primary-content m-auto'>
		<tbody>
		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
		</tbody>
		</table>
	);
}