Implemented data parameters

src/app/components/bingo.tsx

@@ -1,15 +1,21 @@
 import styles from './bingo.module.css'
 import BingoRow from './bingorow.tsx'
 
-export default function Bingo(){
+interface Props{
+	size: number;
+	items: string[];
+}
+
+export default function Bingo({size, items}: Props){
+	let rows: string[][] = [];
+	for(let i = 0; i < items.length; i++)
+	{
+		rows[i] = items.slice(i * size, (i + 1) * size);
+	}
 	return(
 		<table className={styles.table}>
 		<tbody>
-		<BingoRow/>
-		<BingoRow/>
-		<BingoRow/>
-		<BingoRow/>
-		<BingoRow/>
+		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
 		</tbody>
 		</table>
 	);

src/app/components/bingoitem.tsx

@@ -1,7 +1,11 @@
 import styles from './bingo.module.css'
 
-export default function BingoItem(){
+interface Props{
+	text: string;
+}
+
+export default function BingoItem({text}: Props){
 	return(
-		<td className={styles.td}>Item</td>
+		<td className={styles.td}>{text}</td>
 	);
 }

src/app/components/bingorow.tsx

@@ -1,13 +1,13 @@
 import BingoItem from './bingoitem.tsx'
 
-export default function BingoRow(){
+interface Props{
+	items: string[];
+}
+
+export default function BingoRow({items}: Props){
 	return(
 		<tr>
-		<BingoItem/>
-		<BingoItem/>
-		<BingoItem/>
-		<BingoItem/>
-		<BingoItem/>
+		{items.map((item, index) => <BingoItem key={index} text={item}/>)}
 		</tr>
 	);
 }