NeoScan_Physician/app/modules/Dashboard/components/PriorityIndicator.tsx

61 lines
1.5 KiB
TypeScript

/*
* File: PriorityIndicator.tsx
* Description: Component to display a colored dot and label for case priority
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Colors, Spacing, Typography } from 'shared/src/theme';
interface PriorityIndicatorProps {
status: 'critical' | 'urgent' | 'routine';
}
/**
* PriorityIndicator - displays a colored dot and label for case priority
*/
export const PriorityIndicator: React.FC<PriorityIndicatorProps> = ({ status }) => {
const color =
status === 'critical'
? Colors.error
: status === 'urgent'
? Colors.warning
: Colors.success;
const label =
status === 'critical'
? 'Critical'
: status === 'urgent'
? 'Urgent'
: 'Routine';
return (
<View style={styles.container}>
<View style={[styles.dot, { backgroundColor: color }]} />
<Text style={[styles.label, { color }]}>{label}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
},
dot: {
width: 10,
height: 10,
borderRadius: 5,
marginRight: Spacing.xs,
},
label: {
fontFamily: Typography.fontFamily.bold,
fontSize: Typography.fontSize.sm,
},
});
/*
* End of File: PriorityIndicator.tsx
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/