Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 2x 2x | // mui
import { Stack, styled, Divider } from "@mui/material";
// types
import { SettingsMenuListItem } from "types/data.types";
// router-dom
import { Link } from "react-router-dom";
// components
import { CaretRightIcon } from "@phosphor-icons/react";
import { Text } from "@common/Text";
import GiveText from "@shared/Text/GiveText";
// theme
import { useThemeContext } from "@components/EnterpriseSettings/Branding/Provider/CustomThemeProvider";
import { palette } from "@palette";
// localization
import { useTranslation } from "react-i18next";
import { namespaces } from "@localization/resources/i18n.constants";
import React from "react";
export default function SettingsMenu({
menu,
}: {
menu: SettingsMenuListItem[];
}) {
const { t } = useTranslation(namespaces.pages.settings);
const { isDarkMode } = useThemeContext();
return (
<List>
{menu.map((item: SettingsMenuListItem, index: number) => {
const { path, name } = item || {};
return (
<React.Fragment key={`menu-item-${index}`}>
<ItemContainer to={path}>
<GiveText>{t(name)}</GiveText>
<CaretRightIcon
color={isDarkMode ? palette.neutral.white : palette.black[400]}
key={index}
size={16}
/>
</ItemContainer>
<Divider
sx={{
margin: "7px 0",
}}
/>
</React.Fragment>
);
})}
</List>
);
}
const List = styled(Stack)({
flexGrow: 1,
height: "auto",
width: "100%",
gap: "4px",
overflowY: "auto",
overflowX: "hidden",
});
const ItemContainer = styled(Link)({
fontSize: 16,
fontWeight: 400,
lineHeight: "16.2",
padding: 12,
display: "flex",
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between",
textDecoration: "none",
cursor: "pointer",
background: "transparent",
});
|