Added buttons, unfunctional, styling still in work

I am going to go play zelda

src/Firebase.ts

@@ -50,6 +50,9 @@ const db = getDatabase(app);
 
 // Store what channel the user is currently in
 export let currentChannel = "main";
+export function setCurrentChannel(channel: string): void {
+    currentChannel = channel;
+}
 
 // Define structure of user data from Firebase
 export interface UserData {

src/css/Channels.css

@@ -10,3 +10,17 @@
     width: 20%;
     z-index: 1;
 }
+
+.buttons{
+    height: 50px;
+    width: 90%;
+    border: none;
+    border-radius: 5px;
+    background-color: rgb(70, 150, 10);
+    cursor: pointer; /* Makes cursor change on hover */
+    margin: 7px;
+}
+
+.buttons:hover{
+    background-color: rgb(70, 170, 10);
+}

src/layout/Channels.tsx

@@ -5,16 +5,31 @@
  */
 
 import "../css/Channels.css";
-
+import {setCurrentChannel} from "../Firebase";
 
 function Channels() {
 
     return (
         <>
         <div className = "menu">
-            {/* <p>seggs</p> */}
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <center>
+                <button onClick={() => {setCurrentChannel("main");}} className="buttons">Main</button>
+                <button onClick={() => {setCurrentChannel("sec");}} className="buttons">Sec</button>
+            </center>
         </div>
         </>
     );
   }
+
+  // New channels must be added manually
+  /**
+   * main: Bunyips Robotics Club
+   * sec: Test Channel
+   */
+  const channels: Array<string> = ["main", "sec"];
 export default Channels;