34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
import type { RecapDowntimeTopRow } from "@/lib/recap/types";
|
|
|
|
type Props = {
|
|
rows: RecapDowntimeTopRow[];
|
|
};
|
|
|
|
export default function RecapDowntimeTop({ rows }: Props) {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-black/40 p-4">
|
|
<div className="mb-3 text-sm font-semibold text-white">{t("recap.downtime.top")}</div>
|
|
|
|
{rows.length === 0 ? (
|
|
<div className="text-sm text-zinc-400">{t("recap.empty.production")}</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{rows.slice(0, 3).map((row) => (
|
|
<div key={row.reasonLabel} className="rounded-xl border border-white/10 bg-black/20 p-3">
|
|
<div className="text-sm font-medium text-white">{row.reasonLabel}</div>
|
|
<div className="mt-1 text-xs text-zinc-300">
|
|
{row.minutes.toFixed(1)} min · {row.percent.toFixed(1)}%
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|