47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import {
|
|
Paper,
|
|
List,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
} from "@mui/material";
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
|
import SecurityIcon from "@mui/icons-material/Security";
|
|
|
|
interface Props {
|
|
active: "personal" | "account";
|
|
onChange: (section: "personal" | "account") => void;
|
|
}
|
|
|
|
const SettingsSidebar: React.FC<Props> = ({ active, onChange }) => {
|
|
return (
|
|
<Paper elevation={1} sx={{ width: 260, p: 1 }}>
|
|
<List component="nav">
|
|
<ListItemButton
|
|
selected={active === "personal"}
|
|
onClick={() => onChange("personal")}
|
|
>
|
|
<ListItemIcon>
|
|
<AccountCircleIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Personal Info" />
|
|
</ListItemButton>
|
|
<ListItemButton
|
|
selected={active === "account"}
|
|
onClick={() => onChange("account")}
|
|
>
|
|
<ListItemIcon>
|
|
<SecurityIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Account Security" />
|
|
</ListItemButton>
|
|
</List>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default SettingsSidebar;
|