add basic login, signup, navbar

frontend/src/App.tsx

@@ -1,12 +1,21 @@
-import './App.css'
+import "./styles/App.css";
+import { Link } from 'react-router-dom';
 
-function App() {
+export default function App() {
 
   return (
     <>
+      <Navbar />
       <h1>PeerNotes</h1>
     </>
   )
 }
 
-export default App
+function Navbar() {
+  return (
+    <nav>
+      <Link to="/">Home</Link>
+      <Link to="/logout">Logout</Link>
+    </nav>
+  );
+}

frontend/src/assets/screens/Login.tsx

@@ -1,7 +0,0 @@
-export default function Login() {
-    return (
-        <div>
-            <h1>Login</h1>
-        </div>
-    );
-}

frontend/src/assets/screens/Signup.tsx

@@ -1,7 +0,0 @@
-export default function Signup() {
-    return (
-        <div>
-            <h1>Signup</h1>
-        </div>
-    );
-}

frontend/src/main.tsx

@@ -2,9 +2,33 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import Login from './screens/Login.tsx';
+import Signup from './screens/Signup.tsx';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      // add more routes here
+    ]
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/signup",
+    element: <Signup />,
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

frontend/src/screens/Login.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom"
+import "../styles/Login.css"
+export default function Login() {
+    return (
+        <main>
+            <form>
+                <h1>Login</h1>
+                <div className="form-inputs">
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                    <label htmlFor="password">Password</label>
+                    <input type="password" name="password" id="password" />
+                </div>
+                <button>Login</button>
+                <p>or <Link to="/signup">Sign up</Link></p>
+            </form>
+        </main>
+    );
+}

frontend/src/screens/Signup.tsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import "../styles/Login.css"
+export default function Signup() {
+    return (
+        <main>
+            <form>
+                <h1>Sign Up</h1>
+                <div className="form-inputs">
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                    <label htmlFor="password">Password</label>
+                    <input type="password" name="password" id="password" />
+                </div>  
+                <button>Sign up</button>
+                <p>or <Link to="/login">Login</Link></p>
+            </form>
+        </main>
+    );
+}

frontend/src/styles/App.css

@@ -0,0 +1,9 @@
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    border: 3px solid #f1f1f1;
+    border-radius: 5px;
+    color: white;
+}

frontend/src/styles/Login.css

@@ -0,0 +1,20 @@
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+}
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+h1 {
+    text-align: center;
+}
+
+.form-inputs {
+    display: flex;
+    flex-direction: column;
+}