HitonabiandClaude Opus 5.5
907289d7dc
Drei Seiten statt zehn: Start, Updates, Modelle — am PC mit Kopfnavigation, am Handy mit Leiste unten. Umsetzung von Mockup A („Cockpit“), vom User am 23.09. gewaehlt. - Start: Hauptwarnleuchte + 8 Warnlampen, Rundinstrumente mit Live-Werten aus dem Strom (Speicher, Temperatur, Platte) und Laufzeit-Zaehlwerk, Checkliste der Waechter-Hinweise mit ihren Knoepfen, Flugplan (heute gelaufen / geplant), Radar-Kasten. - Updates: Bausteine mit „Laeuft → Neu“ und Zusammenfassung, laufende Auftraege, Verlauf der Sonntagslaeufe (neu: GET /api/updates/verlauf), Sicherungen samt Zurueckspielen mit Rueckfrage. - Modelle: Speicherbalken, Rollen Hirn/Coder/Dritte Rolle, wer die Modelle nutzt (7 Tage + 24 h je Stunde), Modell-Radar, weitere Eintraege, Modelle selbst suchen. - Schubladen: Dienste mit Protokoll und Neustart, Einstellungen (HF-Zugang), Hermes-Link. - Werkzeuge: Vite 8, React 19.3 mit React Compiler 1.0 (Babel), vitest 5, Tailwind 4.3, shadcn 4 (Radix) fuer Dialog/Schublade/Knopf, Schriften Barlow/Barlow Condensed/ JetBrains Mono. Entfernt: recharts, cmdk, Kraftgraph, zustand, Inter, Space Grotesk. - Startbuendel 115 KB gzip (Budget 140); Updates/Modelle/Schubladen laden bei Bedarf. - 16 Oberflaechen-Tests (Instrument-Bogen, Hauptleuchte, Zeitformate, Versionen). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { cn } from "cn"
|
|
import type { Lampe as LampenDaten, LampenZustand } from "@/lib/typen"
|
|
|
|
// Warnlampen wie im Flugzeug: Grün = läuft, dunkel = aus/auf Abruf, Bernstein = kümmern,
|
|
// Cyan = Info, Rot = Störung. Bernstein und Rot leuchten, alles andere bleibt ruhig.
|
|
const LAMPEN_STIL: Record<LampenZustand, { feld: string; name: string; wert: string }> = {
|
|
ok: { feld: "border-gruen-rand bg-gruen-grund", name: "text-gruen", wert: "text-gruen-text" },
|
|
aus: { feld: "border-aus-rand bg-aus-grund", name: "text-aus-text", wert: "text-text-3" },
|
|
warn: { feld: "border-bernstein bg-bernstein-lampe lampe-atmet", name: "text-bernstein", wert: "text-[#f2c46b]" },
|
|
info: { feld: "border-cyan-rand bg-cyan-grund", name: "text-cyan", wert: "text-cyan-text" },
|
|
fehler: {
|
|
feld: "border-rot bg-rot-grund shadow-[0_0_18px_rgba(255,90,79,0.35)]",
|
|
name: "text-rot",
|
|
wert: "text-rot-text",
|
|
},
|
|
}
|
|
|
|
const ZUSTAND_TEXT: Record<LampenZustand, string> = {
|
|
ok: "in Ordnung",
|
|
aus: "aus",
|
|
warn: "braucht Aufmerksamkeit",
|
|
info: "Info",
|
|
fehler: "Störung",
|
|
}
|
|
|
|
export function Lampe({ lampe }: { lampe: LampenDaten }) {
|
|
const stil = LAMPEN_STIL[lampe.zustand] ?? LAMPEN_STIL.aus
|
|
return (
|
|
<li
|
|
className={cn(
|
|
"flex min-h-[58px] flex-col items-center justify-center gap-0.5 rounded-lg border px-2 py-2 text-center",
|
|
stil.feld,
|
|
)}
|
|
>
|
|
<span className={cn("schild text-[17px] leading-none font-bold tracking-[0.18em]", stil.name)}>
|
|
{lampe.label}
|
|
</span>
|
|
<span className={cn("ziffern text-xs uppercase", stil.wert)}>{lampe.wert}</span>
|
|
<span className="sr-only">{ZUSTAND_TEXT[lampe.zustand]}</span>
|
|
</li>
|
|
)
|
|
}
|