Import source: web/src/components/Header
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,212 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import type { LiveTarget, TargetState } from "../lib/types";
|
||||||
|
import { fmtClock, fmtNumber } from "../lib/format";
|
||||||
|
import { springs, STATE_COLOR, useUI, type ViewMode, type Window } from "../lib/ui";
|
||||||
|
|
||||||
|
function LiveClock() {
|
||||||
|
const { lang } = useUI();
|
||||||
|
const [now, setNow] = useState(() => new Date());
|
||||||
|
useEffect(() => {
|
||||||
|
const id = setInterval(() => setNow(new Date()), 1000);
|
||||||
|
return () => clearInterval(id);
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<span className="tabular text-paper-dim text-[13px] font-mono">
|
||||||
|
{fmtClock(lang, now)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Live fleet summary: 24 up · 2 degraded · 1 down. Zero counts hide. */
|
||||||
|
function StatusSummary({ targets }: { targets: LiveTarget[] }) {
|
||||||
|
const { t, lang } = useUI();
|
||||||
|
const counts = new Map<TargetState, number>();
|
||||||
|
targets.forEach((x) => counts.set(x.state, (counts.get(x.state) ?? 0) + 1));
|
||||||
|
const order: TargetState[] = ["up", "degraded", "down", "unknown"];
|
||||||
|
const parts = order.filter((s) => (counts.get(s) ?? 0) > 0);
|
||||||
|
if (parts.length === 0) return null;
|
||||||
|
return (
|
||||||
|
<div className="hidden md:flex items-center gap-3 font-mono text-[10px]">
|
||||||
|
{parts.map((s) => (
|
||||||
|
<span key={s} className="flex items-center gap-1.5">
|
||||||
|
<span className="size-[5px] rounded-full" style={{ background: STATE_COLOR[s] }} />
|
||||||
|
<span className="tabular text-paper-dim">{fmtNumber(lang, counts.get(s)!)}</span>
|
||||||
|
<span className="text-paper-faint">{t.state[s]}</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Segmented<T extends string>({
|
||||||
|
value,
|
||||||
|
options,
|
||||||
|
onChange,
|
||||||
|
ariaLabel,
|
||||||
|
}: {
|
||||||
|
value: T;
|
||||||
|
options: { value: T; label: string }[];
|
||||||
|
onChange: (v: T) => void;
|
||||||
|
ariaLabel: string;
|
||||||
|
}) {
|
||||||
|
const { reduced } = useUI();
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="radiogroup"
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
className="flex items-center border border-ink-700/60 rounded-full p-[3px] gap-[2px]"
|
||||||
|
>
|
||||||
|
{options.map((opt) => {
|
||||||
|
const active = opt.value === value;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={opt.value}
|
||||||
|
role="radio"
|
||||||
|
aria-checked={active}
|
||||||
|
onClick={() => onChange(opt.value)}
|
||||||
|
className={`relative px-3 py-1 rounded-full text-[10px] font-mono tracking-[0.14em] uppercase transition-colors cursor-pointer ${
|
||||||
|
active ? "text-ink-950" : "text-paper-faint hover:text-paper-dim"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{active && (
|
||||||
|
<motion.span
|
||||||
|
layoutId={`seg-${ariaLabel}`}
|
||||||
|
className="absolute inset-0 rounded-full bg-brass"
|
||||||
|
transition={reduced ? { duration: 0 } : springs.snappy}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span className="relative z-10">{opt.label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ThemeToggle() {
|
||||||
|
const { t, theme, setTheme, reduced } = useUI();
|
||||||
|
const next = theme === "dark" ? "light" : "dark";
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setTheme(next)}
|
||||||
|
aria-label={theme === "dark" ? t.themeLight : t.themeDark}
|
||||||
|
title={theme === "dark" ? t.themeLight : t.themeDark}
|
||||||
|
className="size-[30px] rounded-full border border-ink-700/60 text-paper-dim hover:text-paper hover:border-ink-700 cursor-pointer flex items-center justify-center"
|
||||||
|
whileTap={reduced ? undefined : { scale: 0.88, rotate: 40 }}
|
||||||
|
transition={springs.snappy}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 16 16" width={13} height={13} aria-hidden>
|
||||||
|
{theme === "dark" ? (
|
||||||
|
// sun
|
||||||
|
<g stroke="currentColor" strokeWidth={1.2} strokeLinecap="round">
|
||||||
|
<circle cx={8} cy={8} r={3.1} fill="none" />
|
||||||
|
{Array.from({ length: 8 }, (_, i) => {
|
||||||
|
const a = (i * Math.PI) / 4;
|
||||||
|
return (
|
||||||
|
<line
|
||||||
|
key={i}
|
||||||
|
x1={8 + Math.cos(a) * 5}
|
||||||
|
y1={8 + Math.sin(a) * 5}
|
||||||
|
x2={8 + Math.cos(a) * 6.6}
|
||||||
|
y2={8 + Math.sin(a) * 6.6}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</g>
|
||||||
|
) : (
|
||||||
|
// moon
|
||||||
|
<path
|
||||||
|
d="M 13.2 9.8 A 5.6 5.6 0 1 1 6.2 2.8 A 4.6 4.6 0 0 0 13.2 9.8 Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
</motion.button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header({
|
||||||
|
connected,
|
||||||
|
targets,
|
||||||
|
}: {
|
||||||
|
connected: boolean;
|
||||||
|
targets: LiveTarget[];
|
||||||
|
}) {
|
||||||
|
const { t, lang, mode, window, setLang, setMode, setWindow, reduced } =
|
||||||
|
useUI();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="relative z-10 flex flex-wrap items-center gap-x-6 gap-y-4 px-6 sm:px-10 pt-7 pb-5">
|
||||||
|
{/* wordmark */}
|
||||||
|
<div className="flex items-baseline gap-3 me-auto">
|
||||||
|
<span
|
||||||
|
className="text-[28px] leading-none text-paper"
|
||||||
|
style={{ fontFamily: "var(--font-display)" }}
|
||||||
|
>
|
||||||
|
Dash
|
||||||
|
</span>
|
||||||
|
<span className="microlabel hidden sm:inline">{t.tagline}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<StatusSummary targets={targets} />
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 flex-wrap">
|
||||||
|
{/* connection state */}
|
||||||
|
<div className="flex items-center gap-2" title={connected ? t.live : t.connecting}>
|
||||||
|
<span className="relative flex size-[7px]">
|
||||||
|
{connected && !reduced && (
|
||||||
|
<motion.span
|
||||||
|
className="absolute inset-0 rounded-full bg-up"
|
||||||
|
animate={{ scale: [1, 2.4], opacity: [0.6, 0] }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity, ease: "easeOut" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
className={`relative inline-flex size-[7px] rounded-full ${
|
||||||
|
connected ? "bg-up" : "bg-warn"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span className="microlabel">{connected ? t.live : t.connecting}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<LiveClock />
|
||||||
|
|
||||||
|
{mode === "internal" && (
|
||||||
|
<Segmented<Window>
|
||||||
|
ariaLabel="window"
|
||||||
|
value={window}
|
||||||
|
onChange={setWindow}
|
||||||
|
options={[
|
||||||
|
{ value: "24h", label: lang === "fa" ? "۲۴س" : "24H" },
|
||||||
|
{ value: "7d", label: lang === "fa" ? "۷ر" : "7D" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Segmented<ViewMode>
|
||||||
|
ariaLabel="mode"
|
||||||
|
value={mode}
|
||||||
|
onChange={setMode}
|
||||||
|
options={[
|
||||||
|
{ value: "internal", label: t.internalMode },
|
||||||
|
{ value: "public", label: t.publicMode },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Segmented<"en" | "fa">
|
||||||
|
ariaLabel="language"
|
||||||
|
value={lang}
|
||||||
|
onChange={setLang}
|
||||||
|
options={[
|
||||||
|
{ value: "en", label: "EN" },
|
||||||
|
{ value: "fa", label: "فا" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user