62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import { STATUS_COLORS } from './constants';
|
|
import { LegendItem } from './types';
|
|
|
|
export const Legend: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const legendItems: LegendItem[] = [
|
|
{ label: t('menstrual.legend.period'), key: 'period' },
|
|
{ label: t('menstrual.legend.predictedPeriod'), key: 'predicted-period' },
|
|
{ label: t('menstrual.legend.fertile'), key: 'fertile' },
|
|
{ label: t('menstrual.legend.ovulation'), key: 'ovulation-day' },
|
|
];
|
|
|
|
return (
|
|
<View style={styles.legendRow}>
|
|
{legendItems.map((item) => (
|
|
<View key={item.key} style={styles.legendItem}>
|
|
<View
|
|
style={[
|
|
styles.legendDot,
|
|
{ backgroundColor: STATUS_COLORS[item.key].bg },
|
|
item.key === 'ovulation-day' && styles.legendDotRing,
|
|
]}
|
|
/>
|
|
<Text style={styles.legendLabel}>{item.label}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
legendRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 12,
|
|
marginBottom: 12,
|
|
paddingHorizontal: 4,
|
|
},
|
|
legendItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
legendDot: {
|
|
width: 16,
|
|
height: 16,
|
|
borderRadius: 8,
|
|
marginRight: 6,
|
|
},
|
|
legendDotRing: {
|
|
borderWidth: 2,
|
|
borderColor: '#fff',
|
|
},
|
|
legendLabel: {
|
|
fontSize: 13,
|
|
color: '#111827',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
});
|