Merge pull request #17 from ubccsss/shiyu_branch

Navbar

.prettierrc

@@ -0,0 +1 @@
+{}

frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

frontend/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
+    autoprefixer: {}
   },
 }

frontend/src/App.tsx

@@ -1,10 +1,114 @@
-import './index.css'
-function App() {
-
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import "./index.css";
+import Navbar from "./components/Navbar";
+import ShoppingList from "./components/ShoppingList";
+const App = () => {
   return (
-    <>
-    </>
-  )
-}
+    <Router>
+      <Routes>
+        <Route path="/" element={<ShoppingList />} />
+        <Route
+          path="/store"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={false}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={false}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/mainmenu"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/itemdetail/:id"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/reimburse"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/inventory"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/shoppinglist"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/additem"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+        <Route
+          path="/officer/transaction"
+          element={
+            <Navbar
+              title="Login"
+              needbuttons={true}
+              isofficerpage={true}
+              needtitle={true}
+            />
+          }
+        />
+      </Routes>
+    </Router>
+  );
+};
 
-export default App
+export default App;

frontend/src/components/Navbar.tsx

@@ -0,0 +1,45 @@
+import "../index.css";
+import { Link } from "react-router-dom";
+interface NavbarProps {
+  title: string;
+  needbuttons: boolean;
+  isofficerpage: boolean;
+  needtitle: boolean;
+}
+
+const Navbar = ({
+  title,
+  needbuttons,
+  isofficerpage,
+  needtitle,
+}: NavbarProps) => {
+  return (
+    <div className={isofficerpage ? "darkmode" : "lightmode"}>
+      {needbuttons && (
+        <div className="flex justify-end right-4 p-4 text-black-700">
+          <Link to="/officer/mainmenu" className="btn-o mr-4">
+            Back to Main
+          </Link>
+
+          <Link to="/officer" className="btn-o">
+            Logout
+          </Link>
+        </div>
+      )}
+      {needtitle && (
+        <div className="relative top-15 text-center text-6xl ">
+          {title}
+          <hr
+            className={
+              isofficerpage
+                ? "h-px my-6 bg-white border-1 w-4/5 mx-auto"
+                : "h-px my-6 bg-black border-1 w-4/5 mx-auto"
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Navbar;

frontend/src/components/ShoppingList.tsx

@@ -0,0 +1,17 @@
+import "../index.css";
+import Navbar from "./Navbar";
+const ShoppingList = () => {
+  return (
+    <div className="lightmode min-h-screen">
+      <Navbar
+        title="Shopping List"
+        needbuttons={true}
+        isofficerpage={false}
+        needtitle={true}
+      />
+      <div className="text-white">hello!!</div>
+    </div>
+  );
+};
+
+export default ShoppingList;

frontend/src/index.css

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.btn-o {
+  @apply w-40 h-10 bg-[#D9C4E3] rounded-[5px] text-xl text-black flex items-center justify-center;
+}
+
+.btn-c {
+  @apply w-40 h-10 bg-[#4991BA] rounded-[5px] text-xl text-white flex items-center justify-center;
+}
+
+.darkmode {
+  @apply bg-zinc-800 text-white;
+}
+
+.lightmode {
+  @apply bg-white text-black;
+}

frontend/src/main.tsx

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

frontend/tailwind.config.js

@@ -1,12 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};