Finished device list

src/Index.tsx

@@ -1,49 +1,63 @@
-import { useState, useEffect } from 'react'
-import { Routes, Route, useNavigate } from 'react-router-dom';
-import Dashboard from './pages/Dashboard'
-import Devices from './pages/DeviceList'
-import Extend from './pages/ExtendWirelessNetwork'
-import WirelessSettings from './pages/SystemSettings'
-import SystemSettings from './pages/WirelessSettings'
-import Login from './pages/Login'
-import Register from './pages/Register'
-import Navbar from './components/Navbar'
-import './styles/Main.css'
+import { useState, useEffect } from "react";
+import { Routes, Route, useNavigate } from "react-router-dom";
+import Dashboard from "./pages/Dashboard";
+import Devices from "./pages/DeviceList";
+import Extend from "./pages/ExtendWirelessNetwork";
+import WirelessSettings from "./pages/SystemSettings";
+import SystemSettings from "./pages/WirelessSettings";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Navbar from "./components/Navbar";
+import "./styles/Main.css";
 
 function Index() {
   let [loginState, setLoginState] = useState(false);
-  let [loggedUser, setLoggedUser] = useState('');
+  let [loggedUser, setLoggedUser] = useState("");
 
-  let [routerName, setRoutername] = useState('Example Router');
-  let [twoGExtendedName, settwoGExtendedName] = useState('Example 2G Network');
-  let [fiveGExtendedName, setFiveGExtendedName] = useState('Example 5G Network');
-  let [devicesOnline, setDevicesOnline] = useState(0)
+  let [routerName, setRoutername] = useState("Example Router");
+  let [twoGExtendedName, settwoGExtendedName] = useState("Example 2G Network");
+  let [fiveGExtendedName, setFiveGExtendedName] =
+    useState("Example 5G Network");
+  let [devicesOnline, setDevicesOnline] = useState(0);
 
   const navigate = useNavigate();
 
   useEffect(() => {
-    if(!loginState) {
+    if (!loginState) {
       navigate("/login");
     }
-    if(loggedUser === '') {
-      setLoggedUser('Not Logged In')
+    if (loggedUser === "") {
+      setLoggedUser("Not Logged In");
     }
   }, [loginState, setLoggedUser]);
 
-  return(
+  return (
     <>
-      <Navbar LoggedUser={ loggedUser } />
+      <Navbar LoggedUser={loggedUser} />
       <Routes>
-        <Route path="/" element={<Dashboard RouterName={ routerName } TwoGExtendedName={ twoGExtendedName } FiveGExtendedName={ fiveGExtendedName } DevicesOnline={ devicesOnline } />} />
+        <Route
+          path="/"
+          element={
+            <Dashboard
+              RouterName={routerName}
+              TwoGExtendedName={twoGExtendedName}
+              FiveGExtendedName={fiveGExtendedName}
+              DevicesOnline={devicesOnline}
+            />
+          }
+        />
         <Route path="/devices" element={<Devices />} />
         <Route path="/extend" element={<Extend />} />
         <Route path="/wireless" element={<WirelessSettings />} />
         <Route path="/settings" element={<SystemSettings />} />
-        <Route path="/login" element={<Login setLogin={ setLoginState } setUser={ setLoggedUser } />} />
+        <Route
+          path="/login"
+          element={<Login setLogin={setLoginState} setUser={setLoggedUser} />}
+        />
         <Route path="/register" element={<Register />} />
       </Routes>
     </>
-  )
+  );
 }
 
 export default Index;

src/pages/Dashboard.tsx

@@ -9,7 +9,7 @@ import LowSignal from '../assets/low_signal.png'
 import MediumSignal from '../assets/medium_signal.png'
 import HighSignal from '../assets/high_signal.png'
 import Extender from '../assets/extender.png'
-import Devices from '../assets/device.png'
+import Device from '../assets/device.png'
 import Gear from '../assets/gear.png'
 
 interface Props {
@@ -22,8 +22,8 @@ interface Props {
 function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnline }: Props) {
   return (
     <>
-      <header>
-        <ul>
+      <header id="dashboardHeader">
+        <ul className="dashboardList">
           <li>
             <img src={ Globe } className="listIcons" />
             <h2>Internet</h2>
@@ -49,16 +49,16 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
             <img src= { HighSignal } className="signal" />
           </li>
           <li>
-            <img src={ Devices } className="listIcons" />
+            <img src={ Device } className="listIcons" />
             <h2>Devices</h2>
           </li>
         </ul>
       </header>
       <nav id="lowerNav">
-        <ul>
+        <ul className="dashboardList">
           <Link to="/devices">
             <li>
-              <img src={ Devices } />
+              <img src={ Device } />
               <h2>Device List</h2>
               <p>{ DevicesOnline } Devices Online</p>
             </li>

src/pages/DeviceList.tsx

@@ -1,5 +1,47 @@
+import { useState } from "react";
+import Device from '../assets/device.png'
+import '../styles/DeviceList.css'
+
 function DeviceList() {
-  return <p>device list</p>
+
+  let [deviceNames, setDeviceNames] = useState(["My PC", "My Smartphone", "My Smartfridge", "My Watch", "My Remote", "My TV"]);
+  let [deviceIPs, setDeviceIPs] = useState(["10.0.0.2", "10.0.0.3", "10.0.0.4", "10.0.0.5", "10.0.0.6", "10.0.0.7"]);
+
+  const removeDevice = (index: number) => {
+    const newDeviceNames = [...deviceNames];
+    const newDeviceIPs = [...deviceIPs];
+
+    newDeviceNames.splice(index, 1);
+    newDeviceIPs.splice(index,1);
+
+    setDeviceNames(newDeviceNames);
+    setDeviceIPs(newDeviceIPs);
+  }
+ 
+  return (
+    <div id="deviceList">
+      <h2>Device list</h2>
+      { deviceNames.length === 0 && <p>No devices are connected.</p> }
+      <ul id="devices">
+        { deviceNames.map((device, index) => 
+            <li>
+              <img src={ Device } />
+              <div>
+                <h3>{ device }</h3>
+                <p>{ deviceIPs[index] }</p>
+              </div>
+              <svg onClick={ () => removeDevice(index) } className="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                <path 
+                  fill="currentColor" 
+                  d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
+                />
+              </svg>
+            </li>
+          )
+        }
+      </ul>
+    </div>
+  )
 }
 
 export default DeviceList;

src/styles/Dashboard.css

@@ -1,40 +1,40 @@
-header {
+#dashboardHeader {
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 100%;
   height: fit-content;
-  background-color: #071e42;
+  background-color: var(--bg-color-alt);
   margin-top: 20px;
   border-radius: 20px;
   padding: 90px 20px;
 }
 
-ul {
+.dashboardList {
   display: flex;
   align-items: center;
   gap: 20px;
-}
 
-li {
-  display: inherit;
-  flex-direction: column;
-  text-align: center;
-  list-style: none;
+  li {
+    display: inherit;
+    flex-direction: column;
+    text-align: center;
+    list-style: none;
   
-  img {
-    user-select: none;
-    pointer-events: none;
-  }
+    img {
+      user-select: none;
+      pointer-events: none;
+    }
   
-  .listIcons {
-    max-height: 160px;
-  }
-  .arrow {
-    max-height: 60px;
-  }
-  .signal {
-    max-height: 90px;
+    .listIcons {
+      max-height: 160px;
+    }
+    .arrow {
+      max-height: 60px;
+    }
+    .signal {
+      max-height: 90px;
+    }
   }
 }
 
@@ -50,7 +50,7 @@ li {
   li{
     display: flex;
     padding: 40px;
-    background-color: #071e42;
+    background-color: var(--bg-color-alt);
     justify-content: center;
     align-items: center;
     border-radius: 20px;

src/styles/DeviceList.css

@@ -0,0 +1,58 @@
+#deviceList {
+  background-color: var(--bg-color-alt);
+  margin-top: 20px;
+  border-radius: 20px;
+  padding: 20px;
+  height: calc(100% - 50px);
+  overflow: scroll;
+
+  h2 {
+    font-size: 2.5rem;
+    text-align: center;
+  }
+}
+
+#devices {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+
+  li {
+    display: inherit;
+    background-color: #071436;
+    padding: 30px 20px;
+    border-radius: 20px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  h3 {
+    font-size: 1.8rem;
+    width: fit-content;
+  }
+  p {
+    font-size: 1.3rem;
+    width: fit-content;
+  }
+  div {
+    display: inherit;
+    flex-direction: column;
+    text-align: center;
+    margin: 0 20px;
+    position: relative;
+    width: 100%;
+  }
+  img {
+    max-width: 100px;
+  }
+  .close {
+    max-width: 30px;
+    cursor: pointer;
+    color: #fff;
+    transition: 0.3s color;
+  }
+  .close:hover {
+    color: #0069ff;
+  }
+}

src/styles/Main.css

@@ -10,6 +10,10 @@
   font-weight: normal;
 }
 
+:root {
+  --bg-color-alt: #071e42;
+}
+
 * {
   margin: 0;
   padding: 0;