58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { emphasize, styled } from '@mui/material/styles';
|
||
|
|
import Breadcrumbs from '@mui/material/Breadcrumbs';
|
||
|
|
import Chip from '@mui/material/Chip';
|
||
|
|
import HomeIcon from '@mui/icons-material/Home';
|
||
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||
|
|
|
||
|
|
const StyledBreadcrumb = styled(Chip)(({ theme }) => {
|
||
|
|
return {
|
||
|
|
backgroundColor: theme.palette.grey[100],
|
||
|
|
height: theme.spacing(3),
|
||
|
|
color: (theme.vars || theme).palette.text.primary,
|
||
|
|
fontWeight: theme.typography.fontWeightRegular,
|
||
|
|
'&:hover, &:focus': {
|
||
|
|
backgroundColor: emphasize(theme.palette.grey[100], 0.06),
|
||
|
|
...theme.applyStyles('dark', {
|
||
|
|
backgroundColor: emphasize(theme.palette.grey[800], 0.06),
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
'&:active': {
|
||
|
|
boxShadow: theme.shadows[1],
|
||
|
|
backgroundColor: emphasize(theme.palette.grey[100], 0.12),
|
||
|
|
...theme.applyStyles('dark', {
|
||
|
|
backgroundColor: emphasize(theme.palette.grey[800], 0.12),
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...theme.applyStyles('dark', {
|
||
|
|
backgroundColor: theme.palette.grey[800],
|
||
|
|
}),
|
||
|
|
};
|
||
|
|
}) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
|
||
|
|
|
||
|
|
function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
|
||
|
|
event.preventDefault();
|
||
|
|
console.info('You clicked a breadcrumb.');
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CustomizedBreadcrumbs() {
|
||
|
|
return (
|
||
|
|
<div role="presentation" onClick={handleClick}>
|
||
|
|
<Breadcrumbs aria-label="breadcrumb">
|
||
|
|
<StyledBreadcrumb
|
||
|
|
component="a"
|
||
|
|
href="#"
|
||
|
|
label="Home"
|
||
|
|
icon={<HomeIcon fontSize="small" />}
|
||
|
|
/>
|
||
|
|
<StyledBreadcrumb component="a" href="#" label="Catalog" />
|
||
|
|
<StyledBreadcrumb
|
||
|
|
label="Accessories"
|
||
|
|
deleteIcon={<ExpandMoreIcon />}
|
||
|
|
onDelete={handleClick}
|
||
|
|
/>
|
||
|
|
</Breadcrumbs>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|