Merge pull request #665 from bluewave-labs/feat/breadcrumbs

Breadcrumbs component

Client/src/Components/Breadcrumbs/index.css

@@ -0,0 +1,31 @@
+.MuiBreadcrumbs-root {
+  height: 36px;
+}
+.MuiBreadcrumbs-root svg {
+  width: 16px;
+  height: 16px;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
+  opacity: 0.8;
+  font-weight: 400;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:hover a {
+  color: var(--env-var-color-2);
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child):hover a {
+  opacity: 1;
+  background-color: #e3e3e3;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {
+  cursor: pointer;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:last-child a {
+  font-weight: 600;
+  opacity: 1;
+  cursor: default;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-separator {
+  margin: 0;
+}

Client/src/Components/Breadcrumbs/index.jsx

@@ -0,0 +1,63 @@
+import PropTypes from "prop-types";
+import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router";
+import ArrowRight from "../../assets/icons/right-arrow.svg?react";
+
+import "./index.css";
+
+/**
+ * Breadcrumbs component that displays a list of breadcrumb items.
+ *
+ * @param {Object} props
+ * @param {Array} props.list - Array of breadcrumb items. Each item should have `name` and `path` properties.
+ * @param {string} props.list.name - The name to display for the breadcrumb.
+ * @param {string} props.list.path - The path to navigate to when the breadcrumb is clicked.
+ *
+ * @returns {JSX.Element} The rendered Breadcrumbs component.
+ */
+
+const Breadcrumbs = ({ list }) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  return (
+    <MUIBreadcrumbs
+      separator={<ArrowRight />}
+      aria-label="breadcrumb"
+      p={theme.gap.small}
+      width="fit-content"
+      backgroundColor={theme.palette.otherColors.fillGray}
+      borderRadius={`${theme.shape.borderRadius}px`}
+      lineHeight="18px"
+    >
+      {list.map((item, index) => {
+        return (
+          <Box
+            component="a"
+            key={`${item.name}-${index}`}
+            px={theme.gap.small}
+            pt={theme.gap.xs}
+            pb="6px"
+            sx={{ textTransform: "capitalize" }}
+            borderRadius={`${theme.shape.borderRadius}px`}
+            onClick={() => navigate(item.path)}
+          >
+            {item.name}
+          </Box>
+        );
+      })}
+    </MUIBreadcrumbs>
+  );
+};
+
+Breadcrumbs.propTypes = {
+  list: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    }).isRequired
+  ).isRequired,
+};
+
+export default Breadcrumbs;

Client/src/Pages/Monitors/Configure/index.jsx

@@ -21,6 +21,7 @@ import {
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Checkbox from "../../../Components/Inputs/Checkbox";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -220,20 +221,12 @@ const Configure = () => {
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate(-1)}
-            sx={{
-              backgroundColor: "#f4f4f4",
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "monitors", path: "/monitors" },
+              { name: "details", path: `/monitors/${monitorId}` },
+              { name: "configure", path: `/monitors/configure/${monitorId}` },
+            ]}
           />
           <form
             className="configure-monitor-form"
@@ -460,7 +453,7 @@ const Configure = () => {
           }}
         >
           <Typography id="modal-delete-monitor" component="h2">
-          Do you really want to delete this monitor?
+            Do you really want to delete this monitor?
           </Typography>
           <Typography id="delete-monitor-confirmation">
             Once deleted, this monitor cannot be retrieved.

Client/src/assets/icons/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L15 12L9 6" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>