Merge pull request #16 from UoaWDCC/development-main

Development main

README.MD

@@ -3,6 +3,7 @@
 ## Tech Stack
 
 FERN
+
 - Firebase
 - Express
 - React
@@ -12,14 +13,14 @@ FERN
 
 1. install node v21.6.2 (or >= v14.17.3)
 2. install yarn
-3. in ./api run yarn,  then yarn build, then yarn dev (local host backend)
+3. in ./api run yarn, then yarn build, then yarn dev (local host backend)
 4. in ./web run yarn, then yarn build, then yarn dev (local host frontend)
 
 ## Branch convensions
+
 1. One Branch per Task
 2. Name branch VOL-<task_number>/what-is-being-done, e.g. VLT-001/add-user-authentication
 
-
 ## Setup Runbook
 
 1.  Create a new repository with UoAWDCC as owner

web/src/App.tsx

@@ -2,12 +2,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { useState } from 'react';
 import Home from '@pages/Home';
+import MainMenu from '@pages/MainMenu';
 
 const router = createBrowserRouter([
   {
     path: '/:name',
     element: <Home />,
   },
+  {
+    path: '/',
+    element: <MainMenu />,
+  },
 ]);
 
 export default function App() {
@@ -17,4 +22,4 @@ export default function App() {
       <RouterProvider router={router} />
     </QueryClientProvider>
   );
-}
+}

web/src/components/NavBar.tsx

@@ -0,0 +1,19 @@
+// NavBar.js
+import '../styles/componentStyles/NavBar.css';
+
+function NavBar() {
+  return (
+    <nav className="nav-bar">
+      <div className="nav-content">
+        <h1 className="site-title">Temp NavBar</h1>
+        <ul className="nav-links">
+          <li>Home</li>
+          <li>About</li>
+          <li>Contact</li>
+        </ul>
+      </div>
+    </nav>
+  );
+}
+
+export default NavBar;

web/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
-import './index.css';
+import './styles/index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

web/src/pages/MainMenu.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import NavBar from '../components/NavBar'
+
+import '../styles/pageStyles/MainMenu.css';
+
+
+function MainMenu() {
+  return (
+    <NavBar />
+  );
+}
+
+export default MainMenu;

web/src/styles/componentStyles/NavBar.css

@@ -0,0 +1,35 @@
+/* NavBar.css */
+
+/* Navigation Bar */
+.nav-bar {
+    background-color: #333;
+    padding: 1rem;
+  }
+
+  .nav-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .site-title {
+    color: #fff;
+    font-size: 1.5rem;
+  }
+
+  .nav-links {
+    display: flex;
+    gap: 1rem;
+    list-style-type: none;
+  }
+
+  .nav-links li {
+    color: #fff;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .nav-links li:hover {
+    text-decoration: underline;
+  }
+

web/src/styles/index.css

@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:wdth,[email protected],300..800&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* global.css */
+
+/* Reset */
+body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, button, input {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Typography */
+body {
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+p {
+  font-size: 1rem;
+  margin-bottom: 1rem;
+}
+
+/* Links */
+a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* Buttons */
+button {
+  cursor: pointer;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+/* Containers */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Flexbox Utilities */
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}