feat: implement settings management with localStorage

Author: ahkiet22

src/app/(dashboard)/layout.tsx

@@ -19,7 +19,7 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 
 // -- React --
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 // -- React-icon
 import { MdChevronRight, MdExitToApp, MdExpandMore } from "react-icons/md";
@@ -89,6 +89,15 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       }
     };
 
+    useEffect(() => {
+      if (hasChildren) {
+        const childPaths = item.childrens!.map((child) => child.href);
+        if (childPaths.includes(pathName)) {
+          setIsExpanded(true);
+        }
+      }
+    }, [pathName]);
+
     const paddingLeft = 2 + level * 3;
 
     return (

src/app/(dashboard)/project/page.tsx

@@ -253,7 +253,7 @@ export default function ProjectPage() {
           </Box>
         </>
       ) : (
-        <Box sx={{ p: 3, minHeight: "100vh" }}>
+        <Box sx={{ p: 3 }}>
           <Box
             sx={{
               display: "flex",

src/app/(dashboard)/settings/SectionCard.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react"
+import { Card, CardContent } from "@mui/material"
+import { IconType } from "react-icons"
+
+interface Props {
+  title: string
+  description: string
+  icon: IconType
+  children: ReactNode
+}
+
+export function SectionCard({
+  title,
+  description,
+  icon: Icon,
+  children,
+}: Props) {
+  return (
+    <Card className="rounded-2xl shadow-sm">
+      <CardContent className="p-6 space-y-6">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-xl bg-indigo-500/10 text-indigo-600">
+            <Icon size={18} />
+          </div>
+          <div>
+            <h3 className="font-bold">{title}</h3>
+            <p className="text-sm text-gray-500">{description}</p>
+          </div>
+        </div>
+
+        <div className="divide-y">{children}</div>
+      </CardContent>
+    </Card>
+  )
+}

src/app/(dashboard)/settings/SettingRow.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react"
+
+interface Props {
+  label: string
+  description?: string
+  children: ReactNode
+}
+
+export function SettingRow({ label, description, children }: Props) {
+  return (
+    <div className="flex items-center justify-between gap-6 py-4">
+      <div className="space-y-1">
+        <p className="text-sm font-semibold">{label}</p>
+        {description && (
+          <p className="text-xs text-gray-500 max-w-md">
+            {description}
+          </p>
+        )}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}