Feature/frontend updates

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@floating-ui/react": "^0.26.9",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -35,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-router-dom": "^6.22.1"
   }
 }

frontend/src/components/navbar.jsx

@@ -0,0 +1,34 @@
+export default function Navbar() {
+  return (
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Skill Map</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="/">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/users">Users</a>
+            </li>
+
+            <li class="nav-item">
+              <a class="nav-link" href="/skills">Skills</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/skills">Logout</a>
+            </li>
+
+          </ul>
+          <form class="d-flex" role="search">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
+            <button class="btn btn-outline-success" type="submit">Search</button>
+          </form>
+        </div>
+      </div>
+    </nav>
+  );
+}

frontend/src/components/skill.jsx

@@ -0,0 +1,8 @@
+export default function Skill({ id, name }) {
+    return (
+        <tr>
+            <th scope="row">{id}</th>
+            <td>{name}</td>
+        </tr>
+    );
+}

frontend/src/components/skillCreate.jsx

@@ -0,0 +1,33 @@
+export default function CreateSkill() {
+    function onSubmission(event) {
+        event.preventDefault();
+
+        var skillName = event.target.elements.skillName.value;
+        console.log(skillName);
+
+        fetch("http://localhost:8080/api/skills", {
+            method: "POST",
+            body: JSON.stringify({
+                "skillName": skillName,
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                console.log(data);
+                alert(JSON.stringify(data));
+            })
+    }
+    return (
+        <div>
+            <h3>Create Skill</h3>
+            <br />
+            <form onSubmit={onSubmission}>
+                <div className="mb-3">
+                    <label className="form-label">Name</label>
+                    <input type="text" className="form-control" id="skillName" />
+                </div>
+                <button type="submit" className="btn btn-primary">Submit</button>
+            </form>
+        </div>
+    );
+}