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 | 18x 505x 505x 322x 183x 18x 183x 505x | import React from "react";
import { Breadcrumbs } from "@mui/material";
import Typography from "@mui/material/Typography";
import "./BasicBreadcrumbs.scss";
import { Link } from "react-router-dom";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { Box, Divider } from "@mui/material";
import { slugifyTestId } from "@/utils/helpers/testIds";
const nameIsLink = (entry) => {
const crumbId = `breadcrumb-link-${slugifyTestId(entry.name)}`;
if (entry.isLink) {
return (
<Link to={entry.path} state={entry.state}>
<Typography id={crumbId} variant="body2" sx={{ textDecoration: "underline" }}>
{entry.name}
</Typography>
</Link>
);
}
return (
<Typography id={crumbId} variant="body2">
{entry.name}
</Typography>
);
};
const BasicBreadcrumbs = ({ links, id = "page-breadcrumbs" }) => {
return (
<React.Fragment>
{links && links?.length > 0 && (
<>
<Box id={id} className="basic-breadcrumb-content">
<Breadcrumbs
aria-label="breadcrumb"
maxItems={5}
itemsAfterCollapse={2}
separator={<NavigateNextIcon fontSize="small" />}
>
{links.map((entry, index) => (
<div key={index}>{nameIsLink(entry)}</div>
))}
</Breadcrumbs>
</Box>
<Divider />
</>
)}
</React.Fragment>
);
};
export default BasicBreadcrumbs;
|