Add Settings Icon, Page, and Navigation Routes

package.json

@@ -10,23 +10,26 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@fortawesome/fontawesome-svg-core": "^6.5.1",
+		"@fortawesome/fontawesome-svg-core": "^6.6.0",
 		"@fortawesome/free-brands-svg-icons": "^6.5.1",
 		"@fortawesome/free-regular-svg-icons": "^6.5.1",
-		"@fortawesome/free-solid-svg-icons": "^6.5.1",
-		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"@fortawesome/react-fontawesome": "^0.2.2",
 		"@types/node": "^20.14.10",
 		"classnames": "^2.5.1",
 		"dotenv": "^16.4.5",
 		"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.26.2",
+		"router": "^1.3.8"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",
 		"@types/react-dnd-html5-backend": "^3.0.2",
 		"@types/react-dom": "^18.2.17",
+		"@types/react-router-dom": "^5.3.3",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
 		"@vitejs/plugin-react": "^4.2.1",

src/App.tsx

@@ -1,18 +1,20 @@
-import TopBar from "./components/TopBar/TopBar";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import WidgetHolder from "./components/WidgetHolder/WidgetHolder";
-import Footer from "./components/Footer/Footer";
+import SettingsPage from "./components/SettingsPage/SettingsPage";
+import Layout from "./components/Layout/Layout";
 import styles from "./app.module.scss";
 
 function App() {
-	return (
-		<>
-			<div className={styles.app}>
-				<TopBar />
-				<WidgetHolder />
-				<Footer />
-			</div>
-		</>
-	);
+    return (
+        <Router>
+            <Layout>
+                <Routes>
+                    <Route path="/" element={<WidgetHolder />} />
+                    <Route path="/settings" element={<SettingsPage />} />
+                </Routes>
+            </Layout>
+        </Router>
+    );
 }
 
-export default App;
+export default App;

src/components/Layout/Layout.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import TopBar from "../TopBar/TopBar";
+import Footer from "../Footer/Footer";
+// import styles from "../layout.module.scss";
+
+interface LayoutProps {
+    children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+    const location = useLocation();
+
+    return (
+        <div>
+            {location.pathname !== "/settings" && <TopBar />}
+            {children}
+            {location.pathname !== "/settings" && <Footer />}
+        </div>
+    );
+};
+
+export default Layout;

src/components/SettingsPage/SettingsPage.module.scss

@@ -0,0 +1,68 @@
+// Define variables for common colors
+$background-color: #121212;
+$text-color: #d3cdc7;
+$button-color: #918d85;
+$button-text-color: #000;
+$hover-color: lighten($button-color, 10%);
+$cross-hover-color: lighten(#9c988d, 10%);
+
+.settingsPage {
+  background-color: $background-color;
+  color: $text-color;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+
+  .header {
+    display: flex;
+    justify-content: space-between; // Ensures title and cross icon are far apart
+    align-items: center; // Vertically center the title and the icon
+
+    h1 {
+      font-size: 1.5rem; // Reduced font size to match the image
+      font-family: 'Poppins', sans-serif;
+      margin: 0; // Remove margin
+      color: $text-color; // Use the same color as other elements
+    }
+
+    .crossIcon {
+      cursor: pointer;
+      font-size: 1.8rem; // Adjust size for the cross icon
+      color: #9c988d;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: $cross-hover-color;
+      }
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end; // Align button to the right
+    padding: 20px 0; // Add padding to the bottom
+
+    .saveButton {
+      background-color: $button-color;
+      color: $button-text-color;
+      border: none;
+      padding: 12px 24px; // Slightly larger padding for better aesthetics
+      border-radius: 8px;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      .saveIcon {
+        margin-right: 8px;
+      }
+
+      &:hover {
+        background-color: $hover-color;
+      }
+    }
+  }
+}

src/components/SettingsPage/SettingsPage.tsx

@@ -0,0 +1,39 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes, faSave } from "@fortawesome/free-solid-svg-icons"; // Import faSave icon
+import styles from "./SettingsPage.module.scss";
+import { useNavigate } from "react-router-dom";
+
+const SettingsPage = () => {
+    const navigate = useNavigate();
+
+    const handleCrossClick = () => {
+        navigate("/");
+    };
+
+    const handleSaveClick = () => {
+        // Add your save logic here
+        console.log("Settings saved!");
+    };
+
+    return (
+        <div className={styles.settingsPage}>
+            <div className={styles.header}>
+                <h1>Settings</h1>
+                <FontAwesomeIcon 
+                    icon={faTimes} 
+                    className={styles.crossIcon} 
+                    onClick={handleCrossClick}
+                />
+            </div>
+            {/* Add your settings content here */}
+            <div className={styles.footer}>
+                <button className={styles.saveButton} onClick={handleSaveClick}>
+                    <FontAwesomeIcon icon={faSave} className={styles.saveIcon} />
+                    Save
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default SettingsPage;

src/components/TopBar/TopBar.tsx

@@ -1,12 +1,27 @@
+import React from "react";
 import Clock from "./Clock";
+import { faCog } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./topBar.module.scss";
+import { useNavigate } from "react-router-dom";
 
 const TopBar = () => {
-	return (
-		<div className={styles.topBar}>
-			<Clock />
-		</div>
-	);
+    const navigate = useNavigate();
+
+    const handleSettingsClick = () => {
+        navigate("/settings");
+    };
+
+    return (
+        <div className={styles.topBar}>
+            <Clock />
+            <FontAwesomeIcon 
+                icon={faCog} 
+                className={styles.settingsIcon} 
+                onClick={handleSettingsClick}
+            />
+        </div>
+    );
 };
 
-export default TopBar;
+export default TopBar;

src/components/TopBar/topBar.module.scss

@@ -1,6 +1,16 @@
 @import "/src/styles/mixins.scss";
 
 .topBar {
-	@include font-poppins;
-	width: 100%;
+    @include font-poppins;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.settingsIcon {
+    cursor: pointer;
+	font-size: 37px;
+	color: #9c988d;
 }