78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { STATUS_COLORS } from './constants';
|
|
import { DayCellProps } from './types';
|
|
|
|
export const DayCell: React.FC<DayCellProps> = ({ cell, isSelected, onPress }) => {
|
|
const { t } = useTranslation();
|
|
const status = cell.info?.status;
|
|
const colors = status ? STATUS_COLORS[status] : undefined;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={0.8}
|
|
style={styles.dayCell}
|
|
onPress={onPress}
|
|
>
|
|
<View
|
|
style={[
|
|
styles.dayCircle,
|
|
colors && { backgroundColor: colors.bg },
|
|
isSelected && styles.dayCircleSelected,
|
|
cell.isToday && styles.todayOutline,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.dayLabel,
|
|
colors && { color: colors.text },
|
|
!colors && styles.dayLabelDefault,
|
|
]}
|
|
>
|
|
{cell.label}
|
|
</Text>
|
|
</View>
|
|
{cell.isToday && <Text style={styles.todayText}>{t('menstrual.today')}</Text>}
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
dayCell: {
|
|
width: '14.28%',
|
|
alignItems: 'center',
|
|
marginVertical: 6,
|
|
},
|
|
dayCircle: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 20,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#f3f4f6',
|
|
},
|
|
dayCircleSelected: {
|
|
borderWidth: 2,
|
|
borderColor: Colors.light.primary,
|
|
},
|
|
todayOutline: {
|
|
borderWidth: 2,
|
|
borderColor: '#94a3b8',
|
|
},
|
|
dayLabel: {
|
|
fontSize: 15,
|
|
fontFamily: 'AliBold',
|
|
},
|
|
dayLabelDefault: {
|
|
color: '#111827',
|
|
},
|
|
todayText: {
|
|
fontSize: 10,
|
|
color: '#9ca3af',
|
|
marginTop: 2,
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
});
|