32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import { View, Text } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { colors } from '../lib/theme';
|
|
|
|
type Props = {
|
|
days: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
};
|
|
|
|
const sizeMap = {
|
|
sm: { number: 'text-2xl', label: 'text-xs', icon: 16, padding: 'px-3 py-2' },
|
|
md: { number: 'text-5xl', label: 'text-sm', icon: 20, padding: 'px-5 py-4' },
|
|
lg: { number: 'text-7xl', label: 'text-base', icon: 24, padding: 'px-6 py-5' },
|
|
};
|
|
|
|
export function StreakBadge({ days, size = 'md' }: Props) {
|
|
const { t } = useTranslation();
|
|
const s = sizeMap[size];
|
|
return (
|
|
<View className={`items-center bg-white border border-neutral-200 rounded-3xl ${s.padding}`}>
|
|
<View className="flex-row items-center gap-2 mb-1">
|
|
<Ionicons name="flame" size={s.icon} color={colors.brandOrange} />
|
|
<Text className={`${s.number} text-neutral-900 tabular-nums`} style={{ fontFamily: 'Nunito_800ExtraBold' }}>{days}</Text>
|
|
</View>
|
|
<Text className={`${s.label} text-neutral-500 tracking-wide uppercase`} style={{ fontFamily: 'Nunito_600SemiBold' }}>
|
|
{days === 1 ? t('streak.label_one') : t('streak.label_other')} {t('streak.label_suffix')}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|