Add Breadcrumbs component to status page for improved navigation

src/Pages/StatusPage/Create/index.jsx

@@ -3,6 +3,7 @@ import { Stack, Button, Typography } from "@mui/material";
 import Tabs from "./Components/Tabs";
 import GenericFallback from "../../../Components/GenericFallback";
 import SkeletonLayout from "./Components/Skeleton";
+import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
 //Utils
 import { useTheme } from "@emotion/react";
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -58,6 +59,19 @@ const CreateStatusPage = () => {
 
 	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
 		useStatusPageFetch(isCreate, url);
+	
+	// Breadcrumbs
+	const crumbs = [
+		{ name: "status pages", path: "/status" },
+	];
+	if (isCreate) {
+		crumbs.push({ name: "create", path: "/status/create" });
+	} else {
+		crumbs.push(
+			{ name: "details", path: `/status/uptime/${statusPage?.url}` },
+			{ name: "configure", path: "" }
+		);
+	}
 
 	// Handlers
 	const handleFormChange = (e) => {
@@ -218,6 +232,7 @@ const CreateStatusPage = () => {
 	// Load fields
 	return (
 		<Stack gap={theme.spacing(10)}>
+			<Breadcrumbs list={crumbs} />
 			<Tabs
 				form={form}
 				errors={errors}

src/Pages/StatusPage/Status/index.jsx

@@ -7,6 +7,7 @@ import SkeletonLayout from "./Components/Skeleton";
 import StatusBar from "./Components/StatusBar";
 import MonitorsList from "./Components/MonitorsList";
 import Dialog from "../../../Components/Dialog";
+import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
 
 // Utils
 import { useStatusPageFetch } from "./Hooks/useStatusPageFetch";
@@ -28,6 +29,10 @@ const PublicStatus = () => {
 	const { t } = useTranslation();
 	const location = useLocation();
 	const navigate = useNavigate();
+	const crumbs = [
+		{ name: "status pages", path: "/status" },
+		{ name: "details", path: "" },
+	];
 
 	const [statusPage, monitors, isLoading, networkError, fetchStatusPage] =
 		useStatusPageFetch(false, url);
@@ -123,9 +128,9 @@ const PublicStatus = () => {
 	return (
 		<Stack
 			gap={theme.spacing(10)}
-			alignItems="center"
 			sx={{ ...sx, position: "relative" }}
 		>
+			{!isPublic && <Breadcrumbs list={crumbs} />}
 			<ControlsHeader
 				statusPage={statusPage}
 				isDeleting={isDeleting}