70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import { useTheme } from '../../theme';
|
|
import { getStyles } from './statCard.styles';
|
|
import { StatCardProps } from './statCard.props';
|
|
|
|
export const StatCard: React.FC<StatCardProps> = ({
|
|
label,
|
|
count,
|
|
color,
|
|
isSelected = false,
|
|
onPress,
|
|
style,
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const themeColor = color || colors.icon;
|
|
const borderColor = isSelected ? themeColor : colors.border;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={onPress ? 0.8 : 1}
|
|
onPress={onPress}
|
|
style={[
|
|
styles.card,
|
|
{ borderColor },
|
|
isSelected && styles.cardSelected,
|
|
style,
|
|
]}
|
|
>
|
|
{/* Top Status Pill Tag */}
|
|
<View
|
|
style={[
|
|
styles.pillTag,
|
|
isSelected
|
|
? { backgroundColor: themeColor }
|
|
: styles.pillTagInactive,
|
|
]}
|
|
>
|
|
<View
|
|
style={[
|
|
styles.statusDot,
|
|
{ backgroundColor: isSelected ? '#FFFFFF' : themeColor },
|
|
]}
|
|
/>
|
|
<Text
|
|
style={[
|
|
styles.labelText,
|
|
{ color: isSelected ? '#FFFFFF' : colors.textSecondary },
|
|
]}
|
|
numberOfLines={1}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Large Metric Count */}
|
|
<Text
|
|
style={[
|
|
styles.countText,
|
|
{ color: isSelected ? themeColor : colors.text },
|
|
]}
|
|
>
|
|
{count}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|