Feature/wms 10 (#19)

* Design the Breadcrumbs Component

* Updated: caret height
Renamed: icon component

Co-authored-by: TalhaAbbas55 <talhaabbas556989@.com>
Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/assets/images/CarretArrowRightIcon.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+
+const CarretArrowRightIcon = ({ width = 24, height = 24, color = 'black', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    {...props}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.9101 20.67C8.7201 20.67 8.5301 20.6 8.3801 20.45C8.0901 20.16 8.0901 19.68 8.3801 19.39L14.9001 12.87C15.3801 12.39 15.3801 11.61 14.9001 11.13L8.3801 4.61002C8.0901 4.32002 8.0901 3.84002 8.3801 3.55002C8.6701 3.26002 9.1501 3.26002 9.4401 3.55002L15.9601 10.07C16.4701 10.58 16.7601 11.27 16.7601 12C16.7601 12.73 16.4801 13.42 15.9601 13.93L9.4401 20.45C9.2901 20.59 9.1001 20.67 8.9101 20.67Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default CarretArrowRightIcon;
+
+CarretArrowRightIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

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 }) {
+function Breadcrumbs({ title, route, light }) {
-  const routes = route.slice(0, -1);
-
   return (
-    <MDBox mr={{ xs: 0, xl: 8 }}>
+    <MDBox
+      mr={{ xs: 0, xl: 8 }}
+      sx={{
+        padding: '12.5px 24px',
+        backgroundColor: '#fff'
+      }}
+    >
       <MuiBreadcrumbs
         sx={{
           '& .MuiBreadcrumbs-separator': {
-            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600])
+            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
+            padding: '0 8px'
           }
         }}
+        separator={<ArrowRight height={15} width={15} />}
       >
-        <Link to="/">
+        {route.map((el) => (
-          <MDTypography
-            component="span"
-            variant="body2"
-            color={light ? 'white' : 'dark'}
-            opacity={light ? 0.8 : 0.5}
-            sx={{ lineHeight: 0 }}
-          >
-            <Icon>{icon}</Icon>
-          </MDTypography>
-        </Link>
-        {routes.map((el) => (
           <Link to={`/${el}`} key={el}>
             <MDTypography
               component="span"
@@ -58,7 +49,6 @@ function Breadcrumbs({ icon, title, route, light }) {
               fontWeight="regular"
               textTransform="capitalize"
               color={light ? 'white' : 'dark'}
-              opacity={light ? 0.8 : 0.5}
               sx={{ lineHeight: 0 }}
             >
               {el}
@@ -75,7 +65,6 @@ function Breadcrumbs({ icon, title, route, light }) {
           {title.replace('-', ' ')}
         </MDTypography>
       </MuiBreadcrumbs>
-
     </MDBox>
   );
 }
@@ -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