Create sudoku react

src/node/react/src/components/Sudoku/Board.tsx

@@ -0,0 +1,18 @@
+import useSudoku from "@/hooks/useSudoku";
+import Square from "./Square";
+
+const Board = () => {
+    const [array, _setArray] = useSudoku();
+
+    return (
+        <div className="flex border w-90 h-90 bg-blue-900 text-white gap-1">
+            {array.map((digits, index) => {
+            return (
+                <Square index={index} digits={digits}/>
+            )
+            })}
+        </div>
+    );
+};
+
+export default Board;

src/node/react/src/components/Sudoku/Digit.tsx

@@ -0,0 +1,11 @@
+import {type DigitProps} from "./types";
+
+const Digit = ({value, index}: DigitProps) => {
+    return (
+        <div className="border flex-1 flex-wrap p-1 h-5 w-5" key={"d-"+index}>
+            {value}
+        </div>
+    );
+};
+
+export default Digit;

src/node/react/src/components/Sudoku/Square.tsx

@@ -0,0 +1,12 @@
+import {type SquareProps} from "./types";
+import Digit from "./Digit";
+
+const Square = ({digits, index}: SquareProps) => {
+    return (
+        <div key={"sq-"+index} className="flex flex-1 flex-wrap justify-center items-center w-1/3 h-1/3 gap-1">
+          {digits.map((digit, i) => <Digit value={digit} index={i} />)}
+        </div>
+    );
+};
+
+export default Square;

src/node/react/src/components/Sudoku/types.ts

@@ -0,0 +1,9 @@
+export type DigitProps = {
+    value: string;
+    index: string;
+}
+
+export type SquareProps = {
+    digits: string[];
+    index: string
+}

src/node/react/src/components/TicTacToe/Board.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import BoardRow from "./BoardRow";
 import checkWinner from "./checkWinner";
 

src/node/react/src/hooks/useSudoku.ts

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+type SudokuState = [
+    array: string[][],
+    setArrray: (array: string[][]) => void
+ ];
+
+const useSudoku = (): SudokuState => {
+    const [array, setArray] = useState(createTestArray());
+
+    return [
+        array,
+        setArray,
+    ];
+};
+
+export default useSudoku;
+
+function createTestArray(): string[][] {
+  const grid = [];
+  const digits = "123456789";
+  const _shuffle = (str: string): string => [...str].sort(()=>Math.random()-.5).join('');
+
+  for (let i = 0; i < 9; i++) {
+    grid[i] = [...digits]
+  }
+  return grid;
+}
+

src/node/react/src/pages/HomePage.tsx

@@ -5,7 +5,7 @@ const HomePage = () => {
     return <>
         <Game />
         <hr/>
-        <h2 className="text-center text-2xl mt-2">BentoGrid</h2>
+        <h2 className="mt-4 text-center text-2xl mt-2">BentoGrid</h2>
         <BentoGrid />
       </>
     }

src/node/react/src/pages/SudokuGamePage.tsx

@@ -1,6 +1,9 @@
+import Board from "@/components/Sudoku/Board";
+
 export default function SudokuGamePage() {
   return (
-    <div className="container">
+    <div className="container p-2 flex justify-center align-center">
+        <Board />
     </div>
   )
 }