From 47b429e8b1c8ae99a945ee0795d98311bc2aba42 Mon Sep 17 00:00:00 2001
From: Parker <contact@pkrm.dev>
Date: Tue, 12 Nov 2024 23:34:45 -0600
Subject: basic navbar

---
 app/src/components/Navbar.tsx | 19 +++++++--
 app/src/components/Signup.tsx | 94 ++++++++++++++++++++++---------------------
 2 files changed, 65 insertions(+), 48 deletions(-)

(limited to 'app/src/components')

diff --git a/app/src/components/Navbar.tsx b/app/src/components/Navbar.tsx
index 7ffb514..5107bf4 100644
--- a/app/src/components/Navbar.tsx
+++ b/app/src/components/Navbar.tsx
@@ -1,10 +1,23 @@
 import styles from '../styles/Navbar.module.css';
+import { Link } from 'react-router-dom';
 
 function Navbar() {
   return (
-    <nav className={styles.navbar}>
-      <span>LinkLogger</span>
-    </nav>
+    <div className={styles.navbar}>
+      <div className={styles.navbarLeft}>
+        <Link to={'/login'}>
+          <a className={styles.navbarLink}>Login</a>
+        </Link>
+        <Link to={'/signup'}>
+          <a className={styles.navbarLink}>Signup</a>
+        </Link>
+      </div>
+      <div className={styles.navbarRight}>
+        <Link to={'/status'}>
+          <a className={styles.navbarLink}>API Status</a>
+        </Link>
+      </div>
+    </div>
   );
 }
 
diff --git a/app/src/components/Signup.tsx b/app/src/components/Signup.tsx
index 388396c..5ec2e17 100644
--- a/app/src/components/Signup.tsx
+++ b/app/src/components/Signup.tsx
@@ -3,6 +3,7 @@ import styles from '../styles/Login.module.css';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import Navbar from './Navbar';
 
 function Signup() {
   document.title = 'LinkLogger | Signup';
@@ -61,52 +62,55 @@ function Signup() {
   };
 
   return (
-    <div id={styles.container}>
-      <p id={styles.signupText}>Sign up</p>
-      <p id={styles.error} className={error ? 'visible' : 'hidden'}>
-        {error}
-      </p>
-      <div>
-        <header>
-          <hr></hr>
-          <form onSubmit={handleSubmit}>
-            <input
-              type="text"
-              placeholder="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-            />
-            <input
-              type="password"
-              placeholder="password"
-              value={password}
-              minLength={8}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-            <input
-              type="password"
-              placeholder="confirm password"
-              value={passwordConfirm}
-              minLength={8}
-              onChange={(e) => setPasswordConfirm(e.target.value)}
-              required
-            />
-            <button type="submit" disabled={isSubmitting}>
-              {isSubmitting ? 'Submitting...' : 'Submit'}
-            </button>
-          </form>
-          <hr></hr>
-          <p id={styles.bottomText}>
-            Already have an account?{' '}
-            <Link to="/login" className={styles.link}>
-              Log in here.
-            </Link>
-          </p>
-        </header>
+    <>
+      <Navbar />
+      <div id={styles.container}>
+        <p id={styles.signupText}>Sign up</p>
+        <p id={styles.error} className={error ? 'visible' : 'hidden'}>
+          {error}
+        </p>
+        <div>
+          <header>
+            <hr></hr>
+            <form onSubmit={handleSubmit}>
+              <input
+                type="text"
+                placeholder="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                required
+              />
+              <input
+                type="password"
+                placeholder="password"
+                value={password}
+                minLength={8}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+              <input
+                type="password"
+                placeholder="confirm password"
+                value={passwordConfirm}
+                minLength={8}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+                required
+              />
+              <button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? 'Submitting...' : 'Submit'}
+              </button>
+            </form>
+            <hr></hr>
+            <p id={styles.bottomText}>
+              Already have an account?{' '}
+              <Link to="/login" className={styles.link}>
+                Log in here.
+              </Link>
+            </p>
+          </header>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 
-- 
cgit v1.2.3-70-g09d2