Add Bank Switch

src/components/BankSwitch.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import bank from "../redux/reducer/bank";
+
+function BankSwitch() {
+  const dispatch = useDispatch();
+  const bankState = useSelector((state) => state.bank);
+  const switchBank = () => {
+    dispatch({
+      type: "switch",
+    });
+  };
+
+  useEffect(() => {
+    const boxSwitch = document.getElementById("box-switch");
+    if (bankState === bank.bankOne) {
+      boxSwitch.style.float = "left";
+    } else if (bankState === bank.bankTwo) {
+      boxSwitch.style.float = "right";
+    }
+  }, [bankState]);
+
+  return (
+    <div className="flex flex-col items-center">
+      <p>Bank</p>
+      <div onClick={switchBank} className="bg-black w-16 h-5 cursor-pointer">
+        <div className="bg-slate-50 h-[80%] w-4 mx-[1px] my-[2px]" id="box-switch"></div>
+      </div>
+    </div>
+  );
+}
+
+export default BankSwitch;

src/components/Display.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 function Display() {
   const currentDisplay = useSelector((state) => state.display);
   return (
-    <div id="display" className="bg-slate-300">
+    <div id="display" className="bg-slate-300 w-[150px] text-center p-1">
       {currentDisplay}
     </div>
   );

src/components/DrumMachine.js

@@ -1,21 +1,16 @@
 import React from "react";
 import PadGroup from "./PadGroup";
 import Display from "./Display";
-import { useDispatch } from "react-redux";
+import BankSwitch from "./BankSwitch";
 
 function DrumMachine() {
-  const dispatch = useDispatch();
-  const switchBank = () => {
-    dispatch({
-      type: "switch",
-    });
-  };
-
   return (
     <div id="drum-machine" className="flex items-center justify-evenly bg-slate-200 gap-4 p-2">
       <PadGroup></PadGroup>
-      <Display></Display>
-      <button onClick={switchBank}>switch</button>
+      <div className="flex flex-col justify-center items-center gap-2">
+        <Display></Display>
+        <BankSwitch></BankSwitch>
+      </div>
     </div>
   );
 }