53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
type Props = {
|
|
total: number;
|
|
fishing: number;
|
|
transit: number;
|
|
pairLinks: number;
|
|
alarms: number;
|
|
pollingStatus: "idle" | "loading" | "ready" | "error";
|
|
lastFetchMinutes: number | null;
|
|
clock: string;
|
|
adminMode?: boolean;
|
|
onLogoClick?: () => void;
|
|
};
|
|
|
|
export function Topbar({ total, fishing, transit, pairLinks, alarms, pollingStatus, lastFetchMinutes, clock, adminMode, onLogoClick }: Props) {
|
|
const statusColor =
|
|
pollingStatus === "ready" ? "#22C55E" : pollingStatus === "loading" ? "#F59E0B" : pollingStatus === "error" ? "#EF4444" : "var(--muted)";
|
|
return (
|
|
<div className="topbar">
|
|
<div className="logo" onClick={onLogoClick} style={{ cursor: onLogoClick ? "pointer" : undefined }} title={adminMode ? "ADMIN" : undefined}>
|
|
🛰 <span>WING</span> 조업감시·선단연관 {adminMode ? <span style={{ fontSize: 10, color: "#F59E0B" }}>(ADMIN)</span> : null}
|
|
</div>
|
|
<div className="stats">
|
|
<div className="stat">
|
|
DATA <b style={{ color: "#22C55E" }}>API</b>
|
|
</div>
|
|
<div className="stat">
|
|
POLL{" "}
|
|
<b style={{ color: statusColor }}>
|
|
{pollingStatus.toUpperCase()}
|
|
{lastFetchMinutes ? `(${lastFetchMinutes}m)` : ""}
|
|
</b>
|
|
</div>
|
|
<div className="stat">
|
|
전체 <b>{total}</b>척
|
|
</div>
|
|
<div className="stat">
|
|
조업 <b style={{ color: "#22C55E" }}>{fishing}</b>
|
|
</div>
|
|
<div className="stat">
|
|
항해 <b style={{ color: "#3B82F6" }}>{transit}</b>
|
|
</div>
|
|
<div className="stat">
|
|
쌍연결 <b style={{ color: "#F59E0B" }}>{pairLinks}</b>
|
|
</div>
|
|
<div className="stat">
|
|
경고 <b style={{ color: "#EF4444" }}>{alarms}</b>
|
|
</div>
|
|
</div>
|
|
<div className="time">{clock}</div>
|
|
</div>
|
|
);
|
|
}
|