From e60a1fc41387227fc3966aba8607f4c8b861ab37 Mon Sep 17 00:00:00 2001 From: kshitij79 Date: Wed, 1 Jan 2025 13:43:00 -0500 Subject: [PATCH] feat(settings): implement settings page component with links Signed-off-by: kshitij79 --- apps/web/src/app/layout.tsx | 2 +- apps/web/src/app/settings/page.tsx | 98 ++++++++++++++++++++++++++++-- apps/web/src/theme.ts | 3 + 3 files changed, 96 insertions(+), 7 deletions(-) diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 9bf32f4..c517b5b 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -20,7 +20,7 @@ export default function RootLayout(props: { children: React.ReactNode }) { return ( - + diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx index 9293300..a3a89dc 100644 --- a/apps/web/src/app/settings/page.tsx +++ b/apps/web/src/app/settings/page.tsx @@ -1,18 +1,104 @@ "use client"; import React from "react"; -import { Typography, Box } from "@mui/material"; +import { + Box, + Typography, + List, + ListItem, + ListItemButton, + ListItemIcon, + ListItemText, + Divider, +} from "@mui/material"; +import AccountCircleIcon from "@mui/icons-material/Person"; +import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined"; +import PrivacyTipIcon from "@mui/icons-material/PrivacyTipOutlined"; +import GavelIcon from "@mui/icons-material/ClassOutlined"; +import SupportIcon from "@mui/icons-material/ContactSupportOutlined"; +import InfoIcon from "@mui/icons-material/InfoOutlined"; +import FeedbackIcon from "@mui/icons-material/CommentOutlined"; +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; +import { useRouter } from "next/navigation"; export default function Settings() { + const router = useRouter(); + + const settingsItems = [ + { + icon: , + text: "Account", + route: "/settings/account", + }, + { + icon: , + text: "Notifications", + route: "/settings/notifications", + }, + { + icon: , + text: "Data and Privacy", + route: "/settings/data-privacy", + }, + { icon: , text: "Legal", route: "/settings/legal" }, + { icon: , text: "Support", route: "/settings/support" }, + { icon: , text: "About", route: "/settings/about" }, + { + icon: , + text: "Send Feedback", + secondaryText: "Version 1.0", + route: "/settings/feedback", + }, + ]; + return ( - Settings Page + + Settings + + + {settingsItems.map(item => ( + + + router.push(item.route)}> + {item.icon} + + + + + + + ))} + + + + + router.push("/logout")}> + + + + ); } diff --git a/apps/web/src/theme.ts b/apps/web/src/theme.ts index a66c7a4..fb05b70 100644 --- a/apps/web/src/theme.ts +++ b/apps/web/src/theme.ts @@ -41,6 +41,9 @@ const theme = createTheme({ header: { main: "#86c232", // Define a custom green color for the header }, + background: { + default: "#f5f5f5", + }, }, typography: { fontFamily: roboto.style.fontFamily,