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 | 1486x 1486x 1486x | import { Divider, SxProps } from "@mui/material";
import { useAppTheme } from "@theme/v2/Provider";
interface Props {
direction?: "horizontal" | "vertical";
bgType?:
| "primary"
| "secondary"
| "transparent_10"
| "transparent"
| "tertiary";
sx?: SxProps;
my?: string | number;
mt?: string | number;
mb?: string | number;
ml?: string | number;
mr?: string | number;
}
function GiveDivider({
direction = "horizontal",
bgType = "primary",
sx,
my = "16px",
mt,
ml,
mr,
mb,
}: Props) {
const { palette } = useAppTheme();
const bgColor = {
primary: palette?.border?.primary,
secondary: palette?.border?.secondary,
transparent_10: palette.primitive?.transparent["darken-10"],
transparent: "transparent",
tertiary: palette?.border?.tertiary,
};
return (
<Divider
sx={{
bgcolor: bgColor[bgType],
my,
mt,
mb,
ml,
mr,
width: direction === "horizontal" ? "100%" : "1px",
height: direction === "vertical" ? "100%" : "1px",
...sx,
}}
/>
);
}
export default GiveDivider;
|