e2e5a1003c
- Slots: zwei animierte volle Progress-Circles (Mobil/Computer) statt Balken, via react-native-svg (keine neue Lib) - Status-Zeile pro Gerät: Online (grün) / Cooldown · noch Xh (amber, aus releaseRequestedAt) / Ungeschützt (rot) — ersetzt Footer + StatusBadge Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Text, View } from 'react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useColors } from '../../lib/theme';
|
|
|
|
export type DeviceStatusKind = 'online' | 'cooldown' | 'unprotected' | 'pending';
|
|
|
|
/**
|
|
* Status-Zeile in der Geräte-Liste: farbiger Punkt + Text.
|
|
* - online → geschützt/verbunden (grün)
|
|
* - cooldown → Pause beantragt, läuft ab (amber, mit Restdauer)
|
|
* - unprotected → Schutz aus (rot, mit Dauer)
|
|
* - pending → wartet auf Aktivierung (amber)
|
|
*/
|
|
export function DeviceStatusPill({
|
|
kind,
|
|
durationText,
|
|
}: {
|
|
kind: DeviceStatusKind;
|
|
durationText?: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
|
|
const cfg: Record<DeviceStatusKind, { color: string; label: string }> = {
|
|
online: { color: colors.success, label: t('devices.status_online') },
|
|
cooldown: {
|
|
color: '#f59e0b',
|
|
label: durationText
|
|
? t('devices.status_cooldown', { time: durationText })
|
|
: t('devices.status_cooldown_short'),
|
|
},
|
|
unprotected: {
|
|
color: colors.error,
|
|
label: durationText
|
|
? t('devices.status_unprotected_since', { time: durationText })
|
|
: t('devices.status_unprotected'),
|
|
},
|
|
pending: { color: '#f59e0b', label: t('devices.status_pending') },
|
|
};
|
|
const c = cfg[kind];
|
|
|
|
return (
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 3 }}>
|
|
<View style={{ width: 7, height: 7, borderRadius: 4, backgroundColor: c.color }} />
|
|
<Text
|
|
numberOfLines={1}
|
|
style={{ fontSize: 12, color: c.color, fontFamily: 'Nunito_600SemiBold', flexShrink: 1 }}
|
|
>
|
|
{c.label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|