From 263f6b85a07088bc7fd0fb2b25011774e3cb5473 Mon Sep 17 00:00:00 2001 From: Chinmay9281 <80890330+Chinmay9281@users.noreply.github.com> Date: Sat, 2 Nov 2024 22:03:18 +0530 Subject: [PATCH] [FEATURE] Settings page (#52) --- package.json | 3 +- src/App.tsx | 20 +++---- src/components/TopBar/TopBar.tsx | 14 +++++ src/components/TopBar/topBar.module.scss | 10 ++++ src/pages/Home/Home.tsx | 16 +++++ .../Home/home.module.scss} | 2 +- src/pages/Settings/Settings.tsx | 37 ++++++++++++ src/pages/Settings/settings.module.scss | 60 +++++++++++++++++++ yarn.lock | 20 +++++++ 9 files changed, 169 insertions(+), 13 deletions(-) create mode 100644 src/pages/Home/Home.tsx rename src/{app.module.scss => pages/Home/home.module.scss} (93%) create mode 100644 src/pages/Settings/Settings.tsx create mode 100644 src/pages/Settings/settings.module.scss diff --git a/package.json b/package.json index cc20ada..10ea196 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 2d8240a..6e8dc41 100644 --- a/src/App.tsx +++ b/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 ( - <> -
- - -
- + + + } /> + } /> + + ); } diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx index 4b8384c..d5583f6 100644 --- a/src/components/TopBar/TopBar.tsx +++ b/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 (
+
); }; diff --git a/src/components/TopBar/topBar.module.scss b/src/components/TopBar/topBar.module.scss index 0d18b8b..df38664 100644 --- a/src/components/TopBar/topBar.module.scss +++ b/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; + } } diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx new file mode 100644 index 0000000..3d3295d --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +export default Home; diff --git a/src/app.module.scss b/src/pages/Home/home.module.scss similarity index 93% rename from src/app.module.scss rename to src/pages/Home/home.module.scss index 95622ce..48ddc46 100644 --- a/src/app.module.scss +++ b/src/pages/Home/home.module.scss @@ -1,4 +1,4 @@ -.app { +.home { height: 100%; display: flex; gap: 16px; diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx new file mode 100644 index 0000000..780f413 --- /dev/null +++ b/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 ( +
+
+
+

Settings

+ +
+
+
+ +
+
+
+ ); +}; + +export default Settings; diff --git a/src/pages/Settings/settings.module.scss b/src/pages/Settings/settings.module.scss new file mode 100644 index 0000000..8b3f7df --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/yarn.lock b/yarn.lock index 1ee005d..b718c3b 100644 --- a/yarn.lock +++ b/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"