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>
 	);
 }

src/app/page.tsx

@@ -2,10 +2,11 @@ import styles from './page.module.css'
 import Bingo from './components/bingo.tsx'
 
 export default function Home(){
+	const items=["test1", "test2", "test3", "test4", "test5"];
 	return(
 		<main className={styles.main}>
 		<h1 align="center">Buzzword Bingo</h1>
-		<Bingo/>
+		<Bingo size={2} items={items}/>
 		</main>
 	);
 }