diff --git a/src/assets/images/CarretArrowRightIcon.js b/src/assets/images/CarretArrowRightIcon.js new file mode 100644 index 0000000..05f6c54 --- /dev/null +++ b/src/assets/images/CarretArrowRightIcon.js @@ -0,0 +1,25 @@ +import PropTypes from 'prop-types'; + +const CarretArrowRightIcon = ({ width = 24, height = 24, color = 'black', ...props }) => ( + + + +); + +export default CarretArrowRightIcon; + +CarretArrowRightIcon.propTypes = { + width: PropTypes.string, + height: PropTypes.string, + color: PropTypes.string +}; diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js index d4879c8..427adb3 100644 --- a/src/components/Breadcrumbs/index.js +++ b/src/components/Breadcrumbs/index.js @@ -2,14 +2,10 @@ ========================================================= * Material Dashboard 2 PRO React - v2.0.0 ========================================================= - * Product Page: https://www.creative-tim.com/product/material-dashboard-pro-react * Copyright 2021 Creative Tim (https://www.creative-tim.com) - Coded by www.creative-tim.com - ========================================================= - * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ @@ -21,36 +17,31 @@ import PropTypes from 'prop-types'; // @mui material components import { Breadcrumbs as MuiBreadcrumbs } from '@mui/material'; -import Icon from '@mui/material/Icon'; +import ArrowRight from 'assets/images/CarretArrowRightIcon'; // Material Dashboard 2 PRO React components import MDBox from 'components/MDBox'; import MDTypography from 'components/MDTypography'; -function Breadcrumbs({ icon, title, route, light }) { - const routes = route.slice(0, -1); - +function Breadcrumbs({ title, route, light }) { return ( - + (light ? white.main : grey[600]) + color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]), + padding: '0 8px' } }} + separator={} > - - - {icon} - - - {routes.map((el) => ( + {route.map((el) => ( {el} @@ -75,7 +65,6 @@ function Breadcrumbs({ icon, title, route, light }) { {title.replace('-', ' ')} - ); } @@ -87,7 +76,6 @@ Breadcrumbs.defaultProps = { // Typechecking props for the Breadcrumbs Breadcrumbs.propTypes = { - icon: PropTypes.node.isRequired, title: PropTypes.string.isRequired, route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired, light: PropTypes.bool