[FEATURE] Settings page (#52)

package.json

@@ -21,7 +21,8 @@
 		"react": "^18.2.0",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.27.0"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",

src/App.tsx

@@ -1,17 +1,15 @@
-import TopBar from "./components/TopBar/TopBar";
-import WidgetHolder from "./components/WidgetHolder/WidgetHolder";
-import Footer from "./components/Footer/Footer";
-import styles from "./app.module.scss";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Home from "./pages/Home/Home";
+import Settings from "./pages/Settings/Settings";
 
 function App() {
 	return (
-		<>
-			<div className={styles.app}>
-				<TopBar />
-				<WidgetHolder />
-				<Footer />
-			</div>
-		</>
+		<BrowserRouter>
+			<Routes>
+				<Route path="/" element={<Home />} />
+				<Route path="/minime/settings" element={<Settings />} />
+			</Routes>
+		</BrowserRouter>
 	);
 }
 

src/components/TopBar/TopBar.tsx

@@ -1,10 +1,24 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
+import { useNavigate } from "react-router-dom";
 import Clock from "./Clock";
 import styles from "./topBar.module.scss";
 
 const TopBar = () => {
+	const navigate = useNavigate();
+
+	const openSettingsPage = () => {
+		navigate("/minime/settings");
+	};
 	return (
 		<div className={styles.topBar}>
 			<Clock />
+			<FontAwesomeIcon
+				icon={faGear}
+				className={styles.settingsIcon}
+				size="2xl"
+				onClick={openSettingsPage}
+			/>
 		</div>
 	);
 };

src/components/TopBar/topBar.module.scss

@@ -1,6 +1,16 @@
+@import "/src/styles/variables.scss";
 @import "/src/styles/mixins.scss";
 
 .topBar {
 	@include font-poppins;
 	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.settingsIcon {
+		color: $clockColor;
+		margin-right: 12px;
+		cursor: pointer;
+	}
 }

src/pages/Home/Home.tsx

@@ -0,0 +1,16 @@
+import TopBar from "../../components/TopBar/TopBar";
+import WidgetHolder from "../../components/WidgetHolder/WidgetHolder";
+import Footer from "../../components/Footer/Footer";
+import styles from "./home.module.scss";
+
+const Home = () => {
+	return (
+		<div className={styles.home}>
+			<TopBar />
+			<WidgetHolder />
+			<Footer />
+		</div>
+	);
+};
+
+export default Home;

src/app.module.scss → src/pages/Home/home.module.scss

@@ -1,4 +1,4 @@
-.app {
+.home {
 	height: 100%;
 	display: flex;
 	gap: 16px;

src/pages/Settings/Settings.tsx

@@ -0,0 +1,37 @@
+import { useNavigate } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose, faSave } from "@fortawesome/free-solid-svg-icons";
+import styles from "./settings.module.scss";
+
+const Settings = () => {
+	const navigate = useNavigate();
+
+	const closeSettingPage = () => {
+		navigate("/");
+	};
+
+	return (
+		<div className={styles.settingsWrapper}>
+			<div className={styles.settings}>
+				<div className={styles.header}>
+					<p className={styles.headerText}>Settings</p>
+					<FontAwesomeIcon
+						icon={faClose}
+						size="2xl"
+						className={styles.closeIcon}
+						onClick={closeSettingPage}
+					/>
+				</div>
+				<div className={styles.content}></div>
+				<div className={styles.footer}>
+					<button className={styles.saveBtn}>
+						<FontAwesomeIcon icon={faSave} />
+						<span className={styles.saveBtnText}>Save</span>
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Settings;

src/pages/Settings/settings.module.scss

@@ -0,0 +1,60 @@
+@import "/src/styles/variables.scss";
+@import "/src/styles/mixins.scss";
+
+.settingsWrapper {
+	height: 100%;
+	display: flex;
+	gap: 16px;
+	padding: 32px;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	.settings {
+		@include font-poppins;
+		color: $clockColor;
+		max-width: max(60vw, 900px);
+		max-height: 80vh;
+		width: 100%;
+
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+
+		.header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.headerText {
+				margin: 0;
+				font-size: 46px;
+				font-weight: 800;
+			}
+			.closeIcon {
+				cursor: pointer;
+			}
+		}
+
+		.content {
+			flex: 1;
+		}
+		.footer {
+			display: flex;
+			justify-content: flex-end;
+
+			.saveBtn {
+				display: flex;
+				gap: 6px;
+				align-items: center;
+				background-color: $clockColor;
+				padding: 16px;
+				border-radius: 6px;
+				cursor: pointer;
+
+				.saveBtnText {
+					font-weight: 600;
+				}
+			}
+		}
+	}
+}

yarn.lock

@@ -494,6 +494,11 @@
   resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
   integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
 
+"@remix-run/router@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.20.0.tgz#03554155b45d8b529adf635b2f6ad1165d70d8b4"
+  integrity sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==
+
 "@rollup/rollup-android-arm-eabi@4.22.4":
   version "4.22.4"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz#8b613b9725e8f9479d142970b106b6ae878610d5"
@@ -1659,6 +1664,21 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-router-dom@^6.27.0:
+  version "6.27.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.27.0.tgz#8d7972a425fd75f91c1e1ff67e47240c5752dc3f"
+  integrity sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==
+  dependencies:
+    "@remix-run/router" "1.20.0"
+    react-router "6.27.0"
+
+react-router@6.27.0:
+  version "6.27.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.27.0.tgz#db292474926c814c996c0ff3ef0162d1f9f60ed4"
+  integrity sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==
+  dependencies:
+    "@remix-run/router" "1.20.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"