From bfc5f4b8f3776da29ff6f36d3f01e29997ed6c20 Mon Sep 17 00:00:00 2001
From: shuyi320 <shuyi021@gmail.com>
Date: Fri, 13 Sep 2024 23:44:24 -0400
Subject: [PATCH] Added toggle function

---
 src/components/BoardSwitcher.jsx | 20 ++++++++++++++++++--
 src/main.jsx                     |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/BoardSwitcher.jsx b/src/components/BoardSwitcher.jsx
index e99793a..9382b93 100644
--- a/src/components/BoardSwitcher.jsx
+++ b/src/components/BoardSwitcher.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useState } from 'react';
 
 function Board(props) {
   let className = "board";
@@ -11,15 +12,30 @@ function Board(props) {
 
 function BoardSwitcher(props) {
   let boards = [];
+
+  const [curr, setCurr] = useState(0);
+
+  function handleClick() {
+    if (curr < props.numBoards-1) {
+      setCurr(curr+1)
+    } else {
+      setCurr(0)
+    }
+    
+  }
+
+
+
   for (let ii = 0; ii < props.numBoards; ii++) {
-    let isSelected = ii === 0;
+    let isSelected = ii === curr;
     boards.push(<Board index={ii} selected={isSelected} key={ii} />);
+    
   }
 
   return (
     <div>
       <div className="boards">{boards}</div>
-      <button>Toggle</button>
+      <button onClick={ handleClick }>Toggle</button>
     </div>
   );
 }
diff --git a/src/main.jsx b/src/main.jsx
index 782f402..316ad56 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,6 @@ import "./index.css";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <BoardSwitcher numBoards={3} />
+    <BoardSwitcher numBoards={5} />
   </React.StrictMode>
 );