From d73e09d2dffd72b8d2c9530bfb56979dc06095b5 Mon Sep 17 00:00:00 2001
From: "Cross, Liam (UG - Comp Sci & Elec Eng)" <lc01383@surrey.ac.uk>
Date: Sun, 10 Mar 2024 19:58:48 +0000
Subject: [PATCH] Basic Header and Footer
---
client/package-lock.json | 115 +++++++++++++++++++++++
client/package.json | 1 +
client/src/App.css | 8 ++
client/src/App.tsx | 10 +-
client/src/components/Footer/Footer.scss | 13 +++
client/src/components/Footer/Footer.tsx | 15 +++
client/src/components/Header/Header.scss | 33 +++++++
client/src/components/Header/Header.tsx | 20 ++++
client/src/index.css | 18 ++++
9 files changed, 232 insertions(+), 1 deletion(-)
create mode 100644 client/src/components/Footer/Footer.scss
create mode 100644 client/src/components/Footer/Footer.tsx
create mode 100644 client/src/components/Header/Header.scss
create mode 100644 client/src/components/Header/Header.tsx
diff --git a/client/package-lock.json b/client/package-lock.json
index a3f0265..5f974e4 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,6 +20,7 @@
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
+ "sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
@@ -1523,6 +1524,19 @@
"node": ">=4"
}
},
+ "node_modules/anymatch": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+ "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+ "dev": true,
+ "dependencies": {
+ "normalize-path": "^3.0.0",
+ "picomatch": "^2.0.4"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1544,6 +1558,15 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
},
+ "node_modules/binary-extensions": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+ "dev": true,
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -1640,6 +1663,42 @@
"node": ">=4"
}
},
+ "node_modules/chokidar": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+ "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+ "dev": true,
+ "dependencies": {
+ "anymatch": "~3.1.2",
+ "braces": "~3.0.2",
+ "glob-parent": "~5.1.2",
+ "is-binary-path": "~2.1.0",
+ "is-glob": "~4.0.1",
+ "normalize-path": "~3.0.0",
+ "readdirp": "~3.6.0"
+ },
+ "engines": {
+ "node": ">= 8.10.0"
+ },
+ "funding": {
+ "url": "https://paulmillr.com/funding/"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/chokidar/node_modules/glob-parent": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+ "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+ "dev": true,
+ "dependencies": {
+ "is-glob": "^4.0.1"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2329,6 +2388,12 @@
"node": ">= 4"
}
},
+ "node_modules/immutable": {
+ "version": "4.3.5",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+ "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+ "dev": true
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2370,6 +2435,18 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true
},
+ "node_modules/is-binary-path": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+ "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+ "dev": true,
+ "dependencies": {
+ "binary-extensions": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2610,6 +2687,15 @@
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
"dev": true
},
+ "node_modules/normalize-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2830,6 +2916,18 @@
"node": ">=0.10.0"
}
},
+ "node_modules/readdirp": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+ "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+ "dev": true,
+ "dependencies": {
+ "picomatch": "^2.2.1"
+ },
+ "engines": {
+ "node": ">=8.10.0"
+ }
+ },
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2919,6 +3017,23 @@
"queue-microtask": "^1.2.2"
}
},
+ "node_modules/sass": {
+ "version": "1.71.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz",
+ "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==",
+ "dev": true,
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
diff --git a/client/package.json b/client/package.json
index 9c2ae3d..816e54c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,6 +22,7 @@
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
+ "sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
diff --git a/client/src/App.css b/client/src/App.css
index e69de29..3876ac7 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -0,0 +1,8 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+.main {
+ height: 85vh;
+}
\ No newline at end of file
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 54670a6..e73504e 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,9 +1,17 @@
import './App.css';
+import Header from './components/Header/Header';
+import Footer from './components/Footer/Footer';
function App() {
return (
<>
- Hello World
+ <div className='wrapper'>
+ <Header></Header>
+ <div className='main'>
+ {/* Main content goes Here */}
+ </div>
+ <Footer></Footer>
+ </div>
</>
);
}
diff --git a/client/src/components/Footer/Footer.scss b/client/src/components/Footer/Footer.scss
new file mode 100644
index 0000000..43b4e13
--- /dev/null
+++ b/client/src/components/Footer/Footer.scss
@@ -0,0 +1,13 @@
+.footer {
+ display: flex;
+ height: 5vh;
+ width: 100%;
+ background-color: var(--main);
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.footer-content {
+ color: white;
+ padding-right: 1.5rem;
+}
\ No newline at end of file
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..6d00b9f
--- /dev/null
+++ b/client/src/components/Footer/Footer.tsx
@@ -0,0 +1,15 @@
+import './Footer.scss';
+
+function Footer() {
+ return (
+ <>
+ <div className='footer'>
+ <div className='footer-content'>
+ <span>COM3014 Group 5</span>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/client/src/components/Header/Header.scss b/client/src/components/Header/Header.scss
new file mode 100644
index 0000000..61cfa62
--- /dev/null
+++ b/client/src/components/Header/Header.scss
@@ -0,0 +1,33 @@
+.header {
+ display: flex;
+ height: 10vh;
+ width: 100%;
+ background-color: var(--main);
+ color: white;
+ flex-direction: row;
+ align-items: center;
+}
+
+.header-content {
+ display: flex;
+ padding-left: 2rem;
+ padding-right: 2rem;
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.header-title {
+ font-size: 3rem;
+}
+
+.nav {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.nav-item {
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+}
\ No newline at end of file
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
new file mode 100644
index 0000000..2cd9b3f
--- /dev/null
+++ b/client/src/components/Header/Header.tsx
@@ -0,0 +1,20 @@
+import './Header.scss';
+
+function Header() {
+ return (
+ <>
+ <div className='header'>
+ <div className='header-content'>
+ <span className='header-title'>Airline Booking</span>
+
+ <nav className='nav'>
+ <a className='nav-item'>Example Nav 1</a>
+ <a className='nav-item'>Nav 2</a>
+ </nav>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index e69de29..d8a001f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+/* Unifies font across frontend */
+* {
+ font-family: "Lato", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+/* Stops whitespace surrounding page */
+body {
+ margin: 0;
+}
+
+/* CSS Variables */
+:root {
+ --main: #000055;
+}
\ No newline at end of file
--
GitLab