38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Box, Typography } from "@mui/material";
|
|
import SettingsAccountSecurity from "./SettingsAccountSecurity";
|
|
import SettingsPersonalInfo from "./SettingsPersonalInfo";
|
|
import SettingsSidebar from "./SettingsSidebar";
|
|
|
|
const SettingsPageClient: React.FC = () => {
|
|
const [activeSection, setActiveSection] = useState<"personal" | "account">(
|
|
"personal"
|
|
);
|
|
|
|
return (
|
|
<Box sx={{ p: 3, display: "flex", flexDirection: "column", gap: 3 }}>
|
|
<Typography variant="h5" fontWeight={600}>
|
|
Settings
|
|
</Typography>
|
|
|
|
<Box sx={{ display: "flex", gap: 3 }}>
|
|
<SettingsSidebar
|
|
active={activeSection}
|
|
onChange={(section: "personal" | "account") =>
|
|
setActiveSection(section)
|
|
}
|
|
/>
|
|
|
|
<Box sx={{ flex: 1 }}>
|
|
{activeSection === "personal" && <SettingsPersonalInfo />}
|
|
{activeSection === "account" && <SettingsAccountSecurity />}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SettingsPageClient;
|