calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-18 23:05:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add translations

Browse Source
This commit is contained in:
Owen
2026-04-22 14:03:40 -07:00
parent 48b6e98bbc
commit c78b866087
5 changed files with 92 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/UptimeBar.tsx
View File

@@ -10,6 +10,7 @@ import {
import { useEnvContext } from "@app/hooks/useEnvContext";
import { createApiClient } from "@app/lib/api";
import { cn } from "@app/lib/cn";
import { useTranslations } from "next-intl";
function formatDuration(seconds: number): string {
if (seconds === 0) return "0s";
@@ -63,6 +64,7 @@ export default function UptimeBar({
title,
className
}: UptimeBarProps) {
const t = useTranslations();
const api = createApiClient(useEnvContext());
const siteQuery = useQuery({
@@ -104,7 +106,7 @@ export default function UptimeBar({
<div
className="flex items-center gap-4 text-sm ml-auto"
aria-busy="true"
aria-label="Loading uptime summary"
aria-label={t("loading")}
>
<span className="h-4 w-[4.5rem] shrink-0 rounded-md bg-muted animate-pulse" />
<span className="h-4 w-[7rem] shrink-0 rounded-md bg-muted animate-pulse" />
@@ -122,8 +124,8 @@ export default function UptimeBar({
))}
</div>
<div className="flex justify-between text-xs text-muted-foreground">
<span>{days} days ago</span>
<span>Today</span>
<span>{t("uptimeDaysAgo", { count: days })}</span>
<span>{t("uptimeToday")}</span>
</div>
</div>
);
@@ -145,7 +147,7 @@ export default function UptimeBar({
<span className="font-semibold text-foreground">
{data.overallUptimePercent.toFixed(2)}%
</span>{" "}
uptime
{t("uptimeSuffix")}
</span>
{data.totalDowntimeSeconds > 0 && (
<span className="text-muted-foreground">
@@ -154,14 +156,14 @@ export default function UptimeBar({
data.totalDowntimeSeconds
)}
</span>{" "}
downtime
{t("uptimeDowntimeSuffix")}
</span>
)}
</>
)}
{allNoData && (
<span className="text-muted-foreground text-xs">
No data available
{t("uptimeNoDataAvailable")}
</span>
)}
</div>
@@ -188,7 +190,7 @@ export default function UptimeBar({
</div>
{day.status !== "no_data" && (
<div className="text-xs text-primary-foreground/80">
Uptime:{" "}
{t("uptimeTooltipUptimeLabel")}:{" "}
<span className="font-medium text-primary-foreground">
{day.uptimePercent.toFixed(1)}%
</span>
@@ -196,7 +198,7 @@ export default function UptimeBar({
)}
{day.totalDowntimeSeconds > 0 && (
<div className="text-xs text-primary-foreground/80">
Downtime:{" "}
{t("uptimeTooltipDowntimeLabel")}:{" "}
<span className="font-medium text-primary-foreground">
{formatDuration(
day.totalDowntimeSeconds
@@ -214,7 +216,7 @@ export default function UptimeBar({
{formatTime(w.start)}
{w.end
? ` – ${formatTime(w.end)}`
: " – ongoing"}{" "}
: ` – ${t("uptimeOngoing")}`}{" "}
<span className="capitalize">
({w.status})
</span>
@@ -224,7 +226,7 @@ export default function UptimeBar({
)}
{day.status === "no_data" && (
<div className="text-xs text-primary-foreground/60">
No monitoring data
{t("uptimeNoMonitoringData")}
</div>
)}
</TooltipContent>
@@ -234,9 +236,9 @@ export default function UptimeBar({
{/* Date labels */}
<div className="flex justify-between text-xs text-muted-foreground">
<span>{days} days ago</span>
<span>Today</span>
<span>{t("uptimeDaysAgo", { count: days })}</span>
<span>{t("uptimeToday")}</span>
</div>
</div>
);
}
}