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 76 77 78 | 61x 61x 61x 61x 61x 684x 684x 684x 684x 684x 684x 684x 684x 684x 1387x 1387x 684x | import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Typography from '@material-ui/core/Typography';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import { ThemeProvider } from '@material-ui/core/styles';
import { NavLink } from 'react-router-dom';
const DARK_BLUE = '#0F1D2F';
const WHITE = '#FEFEFE';
const DARK_GRAY = '#6D6E74';
const FULL_OPAQUE = '100%';
const SEMI_OPAQUE = '80%';
/**
* Navigation enabled breadcrumb.
*
* You may pass an array containing an object of
* <NavBreadcrumbs crumbs={[{name: 'Home', href='/'}]} color="primary"
* @param {Array} crumbs Array of name & href pairs.
* @param {String} color Use primary or secondary color scheme
*/
export default function NavBreadcrumbs(props) {
const crumbs = props.crumbs;
let linkColor = WHITE;
let activeLinkColor = WHITE;
let opacity = SEMI_OPAQUE;
Iif (props.color === 'secondary') {
linkColor = DARK_GRAY;
activeLinkColor = DARK_BLUE;
opacity = FULL_OPAQUE;
}
const linkProps = {
color: linkColor,
opacity: opacity,
textDecoration: 'none',
}
const activeLinkProps = {
color: activeLinkColor,
opacity: FULL_OPAQUE,
}
const theme = createMuiTheme({
overrides: {
MuiBreadcrumbs: {
root: {
fontFamily: 'Work Sans',
padding: '32px',
'& p': linkProps,
'& a:link': linkProps,
'& a:visited': linkProps,
'& a:hover': activeLinkProps,
'& a:active': activeLinkProps,
'& a:focus': activeLinkProps,
},
separator: linkProps,
},
},
});
const displayCrumbs = crumbs.map((i,idx) => {
Eif (i.href) {
return <NavLink key={idx} to={i.href}>{i.name}</NavLink>
} else {
return <Typography key={idx}>{i.name}</Typography>
}
});
return (
<ThemeProvider theme={theme}>
<Breadcrumbs aria-label="breadcrumb" maxItems={6}>
{displayCrumbs}
</Breadcrumbs>
</ThemeProvider>
);
}
|