From d6dc83f34dff0f0547a1ddc16b7b98288dd92e9b Mon Sep 17 00:00:00 2001
From: marenas1 <140763896+marenas1@users.noreply.github.com>
Date: Wed, 11 Sep 2024 19:54:37 -0400
Subject: [PATCH] Added button functionality

---
 BoardSwitcher.jsx | 30 ++++++++++++++++++++++++++++++
 main.jsx          | 11 +++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 BoardSwitcher.jsx
 create mode 100644 main.jsx

diff --git a/BoardSwitcher.jsx b/BoardSwitcher.jsx
new file mode 100644
index 0000000..0bea0ed
--- /dev/null
+++ b/BoardSwitcher.jsx
@@ -0,0 +1,30 @@
+import React, {useState} from "react";
+
+function Board(props) {
+  let className = "board";
+  if (props.selected) {
+    className += " selected";
+  }
+
+  return <div className={className}>{props.index + 1}</div>;
+}
+
+function BoardSwitcher(props) {
+  let boards = [];
+  let [count, toggle]=useState(0)
+  for (let ii = 0; ii < props.numBoards; ii++) {
+    let isSelected = ii === count;
+    boards.push(<Board index={ii} selected={isSelected} key={ii} />);
+  }
+
+  return (
+    <div>
+      <div className="boards">{boards}</div>
+      <button onClick={() => toggle((count) => count==4 ? count=0 :count + 1)}>Toggle</button>
+    </div>
+  );
+}
+
+
+
+export default BoardSwitcher;
diff --git a/main.jsx b/main.jsx
new file mode 100644
index 0000000..76adce1
--- /dev/null
+++ b/main.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import BoardSwitcher from "./components/BoardSwitcher";
+import "./index.css";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <BoardSwitcher numBoards={5} />
+  </React.StrictMode>
+);