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>
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { cn } from "cn"
|
|
import type { Lampe as LampenDaten, Start } from "@/lib/typen"
|
|
import { hauptleuchte } from "@/lib/anzeige"
|
|
import { Lampe } from "./Lampe"
|
|
|
|
type Zustand = Start["zustand"]
|
|
|
|
const LEUCHTE: Record<ReturnType<typeof hauptleuchte>["art"], string> = {
|
|
ok: "border-gruen-rand bg-gruen-grund text-gruen",
|
|
info: "border-cyan-rand bg-cyan-grund text-cyan",
|
|
stumm: "border-aus-rand bg-aus-grund text-aus-text",
|
|
gelb: "border-2 border-bernstein bg-bernstein-grund text-bernstein-hell lampe-atmet",
|
|
rot: "border-2 border-rot bg-rot-grund text-rot shadow-[0_0_32px_rgba(255,90,79,0.3)]",
|
|
}
|
|
|
|
export function Warnpanel({ zustand, lampen, onAnsehen }: {
|
|
zustand: Zustand
|
|
lampen: LampenDaten[]
|
|
onAnsehen: () => void
|
|
}) {
|
|
const h = hauptleuchte(zustand)
|
|
const aktiv = h.art === "gelb" || h.art === "rot"
|
|
return (
|
|
<section aria-label="Warnpanel" className="grid gap-4 md:grid-cols-[260px_minmax(0,1fr)] md:gap-5">
|
|
<button
|
|
type="button"
|
|
onClick={onAnsehen}
|
|
disabled={!aktiv}
|
|
aria-label={`${h.oben} ${h.mitte}`}
|
|
className={cn(
|
|
"flex min-h-[130px] flex-col items-center justify-center gap-1 rounded-2xl border px-4 py-4 font-anzeige transition-colors",
|
|
LEUCHTE[h.art],
|
|
aktiv ? "cursor-pointer" : "cursor-default",
|
|
)}
|
|
>
|
|
<span className="schild text-sm tracking-[0.26em]">{h.oben}</span>
|
|
<span className="text-[40px] leading-none font-bold tracking-[0.04em] sm:text-[44px]">{h.mitte}</span>
|
|
<span className="font-sans text-sm opacity-80">{h.unten}</span>
|
|
</button>
|
|
<ul className="grid grid-cols-2 gap-2.5 rounded-2xl border border-linie bg-panel p-3 sm:grid-cols-4">
|
|
{lampen.map((l) => (
|
|
<Lampe key={l.id} lampe={l} />
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|