47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { View, Text, StyleSheet } from 'react-native'
|
|
|
|
const BADGE_CONFIG: Record<string, { bg: string; color: string }> = {
|
|
Wichtig: { bg: '#FEE2E2', color: '#B91C1C' },
|
|
Pruefung: { bg: '#DBEAFE', color: '#1D4ED8' },
|
|
Foerderung: { bg: '#DCFCE7', color: '#15803D' },
|
|
Veranstaltung: { bg: '#E0E7FF', color: '#4338CA' },
|
|
Allgemein: { bg: '#F1F5F9', color: '#475569' },
|
|
Versammlung: { bg: '#E0E7FF', color: '#4338CA' },
|
|
Kurs: { bg: '#DCFCE7', color: '#15803D' },
|
|
Event: { bg: '#FEF3C7', color: '#B45309' },
|
|
Sonstiges: { bg: '#F1F5F9', color: '#475569' },
|
|
}
|
|
|
|
interface BadgeProps {
|
|
label: string
|
|
kategorie?: string
|
|
typ?: string
|
|
}
|
|
|
|
export function Badge({ label, kategorie, typ }: BadgeProps) {
|
|
const cfg =
|
|
(kategorie && BADGE_CONFIG[kategorie]) ||
|
|
(typ && BADGE_CONFIG[typ]) ||
|
|
{ bg: '#F1F5F9', color: '#475569' }
|
|
|
|
return (
|
|
<View style={[styles.pill, { backgroundColor: cfg.bg }]}>
|
|
<Text style={[styles.label, { color: cfg.color }]}>{label}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
pill: {
|
|
alignSelf: 'flex-start',
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 99,
|
|
},
|
|
label: {
|
|
fontSize: 11,
|
|
fontWeight: '700',
|
|
letterSpacing: 0.2,
|
|
},
|
|
})
|