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>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react"
|
|
import { cn } from "cn"
|
|
|
|
export type ChipArt = "gruen" | "bernstein" | "cyan" | "rot" | "grau"
|
|
|
|
const ART: Record<ChipArt, string> = {
|
|
gruen: "border-gruen-rand bg-gruen-grund text-gruen",
|
|
bernstein: "border-bernstein/60 bg-bernstein-grund text-bernstein",
|
|
cyan: "border-cyan-rand bg-cyan-grund text-cyan",
|
|
rot: "border-rot-rand bg-rot-grund text-rot-text",
|
|
grau: "border-linie bg-erhaben text-text-2",
|
|
}
|
|
|
|
/** Kleines Zustandsschild („GELADEN“, „PASST“, „FEHLGESCHLAGEN“). */
|
|
export function Chip({ art = "grau", children }: { art?: ChipArt; children: ReactNode }) {
|
|
return (
|
|
<span className={cn("schild inline-flex h-7 items-center rounded-full border px-2.5 text-xs whitespace-nowrap", ART[art])}>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/** Einheitlicher Platzhalter, solange Daten laden oder wenn die Box nicht antwortet. */
|
|
export function Zustandsfeld({ fehler, text }: { fehler?: boolean; text: string }) {
|
|
return (
|
|
<div
|
|
role={fehler ? "alert" : "status"}
|
|
className={cn(
|
|
"rounded-2xl border px-5 py-8 text-center text-[15px]",
|
|
fehler ? "border-rot-rand bg-rot-grund text-rot-text" : "border-linie bg-panel text-text-2",
|
|
)}
|
|
>
|
|
{text}
|
|
</div>
|
|
)
|
|
}
|