feat(settings): implement settings page component with links

Signed-off-by: kshitij79 <[email protected]>
Greenstand · Jan 1, 2025 · e60a1fc · e60a1fc
1 parent 8c832f7
commit e60a1fc
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 7 deletions.
diff --git 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 (
     <html lang="en">
-      <body>
+      <body style={{ backgroundColor: theme.palette.background.default }}>
         <AppRouterCacheProvider options={{ enableCssLayer: true }}>
           <ThemeProvider theme={theme}>
             <CssBaseline />

diff --git 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: <AccountCircleIcon />,
+      text: "Account",
+      route: "/settings/account",
+    },
+    {
+      icon: <NotificationsIcon />,
+      text: "Notifications",
+      route: "/settings/notifications",
+    },
+    {
+      icon: <PrivacyTipIcon />,
+      text: "Data and Privacy",
+      route: "/settings/data-privacy",
+    },
+    { icon: <GavelIcon />, text: "Legal", route: "/settings/legal" },
+    { icon: <SupportIcon />, text: "Support", route: "/settings/support" },
+    { icon: <InfoIcon />, text: "About", route: "/settings/about" },
+    {
+      icon: <FeedbackIcon />,
+      text: "Send Feedback",
+      secondaryText: "Version 1.0",
+      route: "/settings/feedback",
+    },
+  ];
+
   return (
     <Box
       sx={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh",
+        padding: "16px",
+        maxWidth: "600px",
+        margin: "0 auto",
       }}>
-      <Typography variant="h4">Settings Page</Typography>
+      <Typography variant="h4" gutterBottom>
+        Settings
+      </Typography>
+      <List>
+        {settingsItems.map(item => (
+          <React.Fragment key={item.route}>
+            <ListItem disablePadding sx={{ backgroundColor: "white" }}>
+              <ListItemButton onClick={() => router.push(item.route)}>
+                <ListItemIcon>{item.icon}</ListItemIcon>
+                <ListItemText
+                  primary={item.text}
+                  secondary={item.secondaryText || null}
+                  primaryTypographyProps={{
+                    sx: {
+                      fontWeight: item.secondaryText ? "normal" : "normal",
+                    },
+                  }}
+                  secondaryTypographyProps={{
+                    sx: { fontSize: "0.8em", color: "gray" },
+                  }}
+                />
+                <ChevronRightIcon />
+              </ListItemButton>
+            </ListItem>
+            <Divider />
+          </React.Fragment>
+        ))}
+      </List>
+
+      <List>
+        <ListItem disablePadding>
+          <ListItemButton onClick={() => router.push("/logout")}>
+            <ListItemText
+              primary="LOG OUT"
+              primaryTypographyProps={{
+                sx: { fontWeight: "bold", textAlign: "center" },
+              }}
+            />
+          </ListItemButton>
+        </ListItem>
+      </List>
     </Box>
   );
 }
diff --git 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,