diff --git a/src/components/AnalyticsModal.tsx b/src/components/AnalyticsModal.tsx index 7975de7..0865b9c 100644 --- a/src/components/AnalyticsModal.tsx +++ b/src/components/AnalyticsModal.tsx @@ -2,6 +2,7 @@ import { useEffect } from "react"; import { createPortal } from "react-dom"; +import { useTranslations } from "next-intl"; /** * Analytics metrics payload returned by the custom backend API @@ -24,20 +25,6 @@ interface AnalyticsModalProps { stats: AnalyticsData; } -/** - * Formats unix timestamps into relative time strings (e.g., "5s ago", "2m ago") - */ -function getTimeAgo(timestamp?: number): string { - if (!timestamp) return "just now"; - const seconds = Math.floor((Date.now() - timestamp * 1000) / 1000); - if (seconds < 10) return "just now"; - if (seconds < 60) return `${seconds}s ago`; - const minutes = Math.floor(seconds / 60); - if (minutes < 60) return `${minutes}m ago`; - const hours = Math.floor(minutes / 60); - return `${hours}h ago`; -} - /** * Terminal-style modal inspector for viewing live traffic and system health metric */ @@ -46,6 +33,22 @@ export default function AnalyticsModal({ onClose, stats, }: AnalyticsModalProps) { + const tAnalyticsModal = useTranslations("AnalyticsModal"); + + /** + * Formats unix timestamps into relative time strings based on locale + */ + const getTimeAgo = (timestamp?: number): string => { + if (!timestamp) return tAnalyticsModal("timeJustNow"); + const seconds = Math.floor((Date.now() - timestamp * 1000) / 1000); + if (seconds < 10) return tAnalyticsModal("timeJustNow"); + if (seconds < 60) return tAnalyticsModal("timeSecondsAgo", { seconds }); + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return tAnalyticsModal("timeMinutesAgo", { minutes }); + const hours = Math.floor(minutes / 60); + return tAnalyticsModal("timeHoursAgo", { hours }); + }; + // Global hotkeys to dismiss the modal (ESC) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { @@ -86,16 +89,16 @@ export default function AnalyticsModal({ @@ -112,7 +115,7 @@ export default function AnalyticsModal({ @@ -126,10 +129,10 @@ export default function AnalyticsModal({