diff --git a/client/src/Components/v2/design-elements/Breadcrumb.tsx b/client/src/Components/v2/design-elements/Breadcrumb.tsx index 1dea2dff6..e0a310c9f 100644 --- a/client/src/Components/v2/design-elements/Breadcrumb.tsx +++ b/client/src/Components/v2/design-elements/Breadcrumb.tsx @@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography"; import { Link, useLocation } from "react-router-dom"; import { useTheme } from "@mui/material/styles"; import { ChevronRight } from "lucide-react"; +import { useTranslation } from "react-i18next"; const isId = (segment: string): boolean => { return segment.length === 24 || /^[a-f0-9-]{36}$/.test(segment); @@ -11,13 +12,14 @@ const isId = (segment: string): boolean => { const actionSegments = ["create", "configure"]; export const Breadcrumb = () => { + const { t } = useTranslation(); const theme = useTheme(); const location = useLocation(); const segments = location.pathname.split("/").filter((x) => x); // Build simplified breadcrumb: "uptime" or "uptime / details" or "uptime / create" - const basePage = segments[0] || "home"; + const basePage = segments[0] || t("common.breadcrumbs.home"); const secondSegment = segments[1]; const isActionPage = secondSegment && actionSegments.includes(secondSegment); // create/config @@ -28,7 +30,7 @@ export const Breadcrumb = () => { if (isActionPage) { return secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1); } - return "Details"; + return t("common.breadcrumbs.details"); }; return ( diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 79e901dc1..80da1835c 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -2,6 +2,10 @@ "common": { "appName": "Checkmate", "monitoringAgentName": "Capture", + "breadcrumbs": { + "home": "Home", + "details": "Details" + }, "labels": { "responseTime": "Response time" },