Merge pull request #3 from NUSComputingDev/feature-template

Add base template

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.21.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
@@ -21,6 +22,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "tailwindcss": "^3.4.0",
     "vite": "^5.0.8"
   }
 }

src/App.jsx

@@ -1,35 +1,79 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useState } from "react";
+import "./App.css";
+import { Routes, Route, Link } from "react-router-dom";
+import menu from "/menu.svg"; //eslint-disable-line
+import close from "/close.svg"; //eslint-disable-line
+import { Home } from "./pages";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [toggle, setToggle] = useState(false);
 
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      {/* Header */}
+      <header>
+        {/* Navigation bar */}
+        <div className="w-full flex justify-between items-center">
+          {/* Logo */}
+          <div className=" text-white font-bold text-2xl">
+            <Link to="/">
+              <h1>NUSComputing</h1>
+            </Link>
+          </div>
+
+          {/* Navigation Links */}
+          <div className="relative z-20 text-white md:flex hidden list-none flex-row justify-between items-center flex-initial text-xl">
+            <Link to="" className="mx-6 hover:scale-[1.1]">
+              Foo
+            </Link>
+            <Link to="" className="mx-6 hover:scale-[1.1]">
+              Foo
+            </Link>
+            <Link to="" className="mx-6 hover:scale-[1.1]">
+              Bar
+            </Link>
+          </div>
+
+          {/* Mobile Navigation */}
+          <div className="md:hidden flex flex-1 items-end justify-end">
+            <img
+              src={toggle ? close : menu}
+              alt="menu"
+              className="w-[28px] h-[28px] object-contain cursor-pointer"
+              onClick={() => setToggle(!toggle)}
+            />
+            <div
+              className={`${
+                !toggle ? "hidden" : "flex"
+              } p-6 mx-4 my-2 top-20 right-0 absolute z-20 rounded-xl`}
+            >
+              <div className="flex justify-end items-center flex-1 flex-col gap-4 text-white">
+                <Link to="" className="mx-6 hover:scale-[1.1]">
+                  Foo
+                </Link>
+                <Link to="" className="mx-6 hover:scale-[1.1]">
+                  Foo
+                </Link>
+                <Link to="" className="mx-6 hover:scale-[1.1]">
+                  Bar
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="w-full min-h-[100vh] overflow-hidden">
+        <Routes>
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </main>
+
+      {/* Footer */}
+      <footer>NUSComputing</footer>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/index.css

@@ -1,39 +1,21 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+
+html, body {
+  font-family: 'Montserrat', sans-serif;
+  background-color: #4a69bd;
+  color: #ffffff;
 }
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: 'white';
   text-decoration: inherit;
 }
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
 
 button {
   border-radius: 8px;

src/main.jsx

@@ -1,10 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

src/pages/Home.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Home = () => {
+  return (
+    <div>Home</div>
+  )
+}
+
+export default Home

src/pages/index.js

@@ -0,0 +1,3 @@
+import Home from './Home'
+
+export { Home }

tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: ['./src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#4a69bd',
+      },
+      transitionTimingFunction: {
+        'out-flex': 'cubic-bezier(0.05, 0.6, 0.4, 0.9)',
+      },
+      screens: {
+        xs: '480px',
+      },
+      fontFamily: {
+        inter: ['Inter var', 'sans-serif'],
+      },
+      boxShadow: {
+        card: '0 0 1px 0 rgba(189,192,207,0.06),0 10px 16px -1px rgba(189,192,207,0.2)',
+        cardhover: '0 0 1px 0 rgba(189,192,207,0.06),0 10px 16px -1px rgba(189,192,207,0.4)',
+      },
+    },
+  },
+  plugins: [],
+};

vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from 'tailwindcss'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/comclub-website-2024/"
+  base: "/",
+  css: {
+    postcss: {
+      plugins: [tailwindcss()],
+    },
+  }
 })