From 744a967961e6e0949487ba7dead3897b025a359b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 13:41:17 -0400
Subject: [PATCH 1/2] Implemented breadcrumbs component

---
 Client/src/Components/Breadcrumbs/index.css   | 31 ++++++++++++++
 Client/src/Components/Breadcrumbs/index.jsx   | 42 +++++++++++++++++++
 Client/src/Pages/Monitors/Configure/index.jsx | 23 ++++------
 Client/src/assets/icons/right-arrow.svg       |  3 ++
 4 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 Client/src/Components/Breadcrumbs/index.css
 create mode 100644 Client/src/Components/Breadcrumbs/index.jsx
 create mode 100644 Client/src/assets/icons/right-arrow.svg

diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css
new file mode 100644
index 000000000..28f75a4b4
--- /dev/null
+++ b/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;
+}
diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
new file mode 100644
index 000000000..adaf6315b
--- /dev/null
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -0,0 +1,42 @@
+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";
+
+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>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 08c8cbe39..a572e9151 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/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.
diff --git a/Client/src/assets/icons/right-arrow.svg b/Client/src/assets/icons/right-arrow.svg
new file mode 100644
index 000000000..6b02062f2
--- /dev/null
+++ b/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>

From 540e639d3e75f5e9a10db6bf708d074bee28b2b7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 13:42:36 -0400
Subject: [PATCH 2/2] Added docs

---
 Client/src/Components/Breadcrumbs/index.jsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
index adaf6315b..506263fce 100644
--- a/Client/src/Components/Breadcrumbs/index.jsx
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router";
@@ -5,6 +6,17 @@ 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();
@@ -39,4 +51,13 @@ const Breadcrumbs = ({ list }) => {
   );
 };
 
+Breadcrumbs.propTypes = {
+  list: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    }).isRequired
+  ).isRequired,
+};
+
 export default Breadcrumbs;