generated from knso/webklar-preview-template
JUSNandClaude Opus 5.5
0571fc01eb
- theme.ts nimmt die Werte der Webseite (--papier, --tinte, --amtsblau, --marker, --stempelrot) statt Gold/Bronze; neue Bausteine schriftart (Georgia / Courier), ecke, kartenSchatten, formularRahmen, etikett - alle Texte in Georgia, Versal-Etiketten in Schreibmaschinenschrift (grau wie "BETREFF"), Karten als Papierblaetter mit feiner Linie + flachem Schatten - Knoepfe wie .cta: Amtsblau bzw. weisses Blatt, Tinten-Rahmen, harter Versatz-Schatten, beim Druecken rutscht der Knopf in den Schatten - Startseite: Briefkopf "BehoerdenKlar by Webklar" mit Tinten-Linie, Textmarker auf "Fristen", dringendste Frist als Formular - Tab-Leiste: Papier mit Tinten-Linie, Scan-Knopf mit hartem Schatten Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
/**
|
|
* Dringlichkeits-Ampel als gut sichtbares Banner.
|
|
* Farbe + Icon + Text — nicht nur Farbe (Barrierefreiheit: Farbenblindheit).
|
|
*/
|
|
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { AmpelStatus } from '../utils/ampel';
|
|
import { abstand, schrift, schriftart, ecke } from '../theme';
|
|
import { Ikone, IkonenName } from './Ikone';
|
|
|
|
const IKONE: Record<string, IkonenName> = { rot: 'warnung', gelb: 'wecker', gruen: 'info' };
|
|
|
|
export function Ampel({ status }: { status: AmpelStatus }) {
|
|
return (
|
|
<View
|
|
style={[styles.banner, { backgroundColor: status.hintergrund, borderLeftColor: status.farbe }]}
|
|
accessibilityRole="alert"
|
|
accessibilityLabel={`Dringlichkeit: ${status.text}`}
|
|
>
|
|
<Ikone name={IKONE[status.stufe]} groesse={26} farbe={status.farbe} />
|
|
<Text style={[styles.text, { color: status.farbe }]}>{status.text}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
banner: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderLeftWidth: 6,
|
|
borderRadius: ecke,
|
|
padding: abstand.m,
|
|
gap: abstand.s,
|
|
},
|
|
text: { fontFamily: schriftart.serif, flex: 1, fontSize: schrift.gross, fontWeight: '700' },
|
|
});
|