From 87f134c9f2714593890a530221df429122c4398b Mon Sep 17 00:00:00 2001
From: Kai Stevenson <kai@kaistevenson.com>
Date: Tue, 10 Jun 2025 23:50:09 -0700
Subject: init

---
 frontend/src/Grid.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 frontend/src/Grid.tsx

(limited to 'frontend/src/Grid.tsx')

diff --git a/frontend/src/Grid.tsx b/frontend/src/Grid.tsx
new file mode 100644
index 0000000..b35f757
--- /dev/null
+++ b/frontend/src/Grid.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { GameState } from "./App";
+
+const Tile = ({
+  word,
+  selectWordHandler,
+}: {
+  selectWordHandler: () => void;
+  word: GameState["words"][number];
+}) => (
+  <button
+    onClick={selectWordHandler}
+    className={`Grid-square ${word.selected ? "Selected" : ""}`}
+    style={{ cursor: "pointer" }}
+  >
+    <h1 className="Fit-text">{word.word.toUpperCase()}</h1>
+  </button>
+);
+
+export const Grid = ({
+  selectWordHandler,
+  words,
+}: {
+  selectWordHandler: (idx: number) => void;
+  words: GameState["words"];
+}) => (
+  <div className="Grid">
+    {new Array(16).fill(undefined).map((_, i) => (
+      <Tile
+        selectWordHandler={() => selectWordHandler(i)}
+        word={words[i]}
+        key={i}
+      />
+    ))}
+  </div>
+);
-- 
cgit v1.2.3-70-g09d2