61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { getStyles } from './statusBadge.styles';
|
|
|
|
export type BadgeStatusType = 'online' | 'offline' | 'busy' | 'onDelivery';
|
|
|
|
interface StatusBadgeProps {
|
|
status: BadgeStatusType;
|
|
}
|
|
|
|
export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const getStyleConfig = () => {
|
|
switch (status) {
|
|
case 'online':
|
|
return {
|
|
bg: styles.onlineBg,
|
|
text: styles.onlineText,
|
|
dotColor: colors.statusOnline,
|
|
};
|
|
case 'offline':
|
|
return {
|
|
bg: styles.offlineBg,
|
|
text: styles.offlineText,
|
|
dotColor: colors.statusOffline,
|
|
};
|
|
case 'busy':
|
|
return {
|
|
bg: styles.busyBg,
|
|
text: styles.busyText,
|
|
dotColor: colors.statusBusy,
|
|
};
|
|
case 'onDelivery':
|
|
return {
|
|
bg: styles.onDeliveryBg,
|
|
text: styles.onDeliveryText,
|
|
dotColor: colors.statusOnDelivery,
|
|
};
|
|
default:
|
|
return {
|
|
bg: styles.offlineBg,
|
|
text: styles.offlineText,
|
|
dotColor: colors.statusOffline,
|
|
};
|
|
}
|
|
};
|
|
|
|
const config = getStyleConfig();
|
|
|
|
return (
|
|
<View style={[styles.container, config.bg]}>
|
|
<View style={[styles.dot, { backgroundColor: config.dotColor }]} />
|
|
<Text style={[styles.label, config.text]}>{status}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
export default StatusBadge;
|