Topic List

components/Button.js

@@ -0,0 +1,14 @@
+import styles from './Button.module.css'
+
+export function Button() {
+  return (
+    <button
+      type="button"
+      // Note how the "error" class is accessed as a property on the imported
+      // `styles` object.
+      className={styles.error}
+    >
+      Destroy
+    </button>
+  )
+}

components/Button.module.css

@@ -0,0 +1,42 @@
+
+.box
+{
+    width: 330px;
+}
+.box h2
+{
+    color: #f6f6f6;
+    background: #f60000;
+    padding: 20px 50px;
+    font-size: 20px;
+    font-weight: 700;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    margin-left: 35px;
+}
+
+.box ul
+{
+    position: relative;
+    background: #fff;
+}
+
+.box ul li
+{
+    list-style: none;
+    padding: 50px;
+    width: 300px;
+    background: #fff;
+    box-shadow: 0 5px 25px rgba(0,0,0,.1);
+    transition: transform 0.5s;
+}
+
+.box ul li:hover
+{
+    transform: scale(1,1);
+    z-index: 100;
+    background: #25c1ff;
+    box-shadow: 0 5px 25px rgba(0,0,0,.1);
+    color: #fff;
+}
+

components/HomePageComponent.js

@@ -0,0 +1,53 @@
+import Editor from "@monaco-editor/react"
+import { useRef, useState, useContext, useEffect } from 'react'
+import Context from '../context/Context'
+import axios from 'axios'
+import styles from './Button.module.css'
+
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+export default function HomePageComponent(props) {
+
+    const containerStyles = {
+        height: 20,
+        width: '100%',
+        backgroundColor: "#e0e0de",
+        borderRadius: 50,
+        margin: 50
+      }
+
+      const fillerStyles = {
+        height: '100%',
+        width: `67%`,
+        backgroundColor: 'red',
+        borderRadius: 'inherit',
+        textAlign: 'right'
+      }
+
+      const labelStyles = {
+        padding: 5,
+        color: 'white',
+        fontWeight: 'bold'
+      }
+
+
+    return (
+
+        <div className = {styles.box}>
+
+        <h2>Introduction to programming<br></br><br></br>
+            <div>
+        </div>
+
+        </h2>
+        <ul>
+            <li>Conditonal Statement  <CircularProgress  variant="static" value={90} size={15} /> </li>
+            <li>Topic Two</li>
+            <li>Topic Three</li>
+            <li>Topic Four</li>
+            <li>Topic Five</li>
+            <li>Topic Six</li>
+        </ul>
+    </div>
+    )
+}

components/LoginComponent.js

@@ -88,7 +88,8 @@ function LoginComponent(props) {
         const email = signUpEmailRef.current.value
         const password = signUpPasswordRef.current.value
         const passwordRepeat = signUpPasswordConfirmRef.current.value
-
+        console.log('auth:')
+        console.log(auth)
         if (validateSignUp({ name, email, password, passwordRepeat })) {
             createUserWithEmailAndPassword(auth, email, password)
                 .then(() => {

components/NavComponent.js

@@ -43,6 +43,16 @@ export default function NavComponent(props) {
         setPage(Pages.PROFILE)
     }
 
+     /**
+     * Handles the user's profile being opened.
+     * @param {*} e 
+     */
+      const handleHomeClick = (e) => {
+        e.preventDefault()
+        setOpenedModule(null)
+        setPage(Pages.Home)
+    }
+
     /**
      * Handles the discussion board being opened.
      * @param {*} e 
@@ -87,6 +97,9 @@ export default function NavComponent(props) {
         navBarContents = (
             <div className="collapse navbar-collapse" id="navbarText">
                 <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+                <li className="nav-item">
+                        <a className={"nav-link" + checkIfActive(Pages.Home)} aria-current="page" href="#" onClick={handleHomeClick}>Home</a>
+                    </li>
                     <li className="nav-item">
                         <a className={"nav-link" + checkIfActive(Pages.MODULES)} href="#" onClick={handleModulesClick}>Modules</a>
                     </li>

context/Pages.js

@@ -4,4 +4,5 @@ export const Pages = {
     LOGIN: "login",
     STUDENT_PROFILE: "student-profile",
     DISCUSSION: "discussion",
+    Home:"Home"
 }