/ frontend / src / app / components / MatxDivider.jsx
MatxDivider.jsx
 1  import { Box, styled } from "@mui/material";
 2  
 3  const DividerRoot = styled(Box)(({ theme }) => ({
 4    textAlign: "center",
 5    position: "relative",
 6    height: 16,
 7    "&::after": {
 8      left: 0,
 9      zIndex: 1,
10      top: "10px",
11      content: '""',
12      width: "100%",
13      height: "1px",
14      position: "absolute",
15      backgroundColor: theme.palette.divider
16    },
17    "& span": {
18      zIndex: 5,
19      background: "#fff",
20      padding: "4px 6px",
21      position: "relative",
22      color: theme.palette.text.secondary
23    }
24  }));
25  
26  export default function MatxDivider({ text, sx }) {
27    return (
28      <div>
29        <DividerRoot sx={sx}>{text && <span>{text}</span>}</DividerRoot>
30      </div>
31    );
32  }