Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 2x 7x 7x 7x | import { Text, TextStyle, View } from 'react-native';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { textStyles } from '@repo/ui/themes/typography';
interface Props {
summaryDateText: string;
summaryValueText: string;
summaryDateStyle?: TextStyle;
summaryValueStyle?: TextStyle;
}
export const DateInfo = ({
summaryDateText,
summaryValueText,
summaryDateStyle,
summaryValueStyle,
}: Props) => {
const styles = useStyles();
return (
<View style={styles.summaryContainer}>
<Text style={[styles.summaryDate, summaryDateStyle]} numberOfLines={1}>
{summaryDateText}
</Text>
<Text style={[styles.summaryDaysOff, summaryValueStyle]}>
{summaryValueText}
</Text>
</View>
);
};
const useStyles = makeStyles(theme => ({
summaryContainer: {
gap: theme.metrics.spacing[0.5],
},
summaryDate: {
...textStyles.content.regular,
color: theme.colors.text.tertiary,
fontSize: theme.metrics.textSize[32],
lineHeight: theme.metrics.textSize[36],
fontWeight: theme.metrics.fontWeight.light,
},
summaryDaysOff: {
...textStyles.content.semiBold,
lineHeight: theme.metrics.textSize[24],
color: theme.colors.text.tertiary,
fontSize: theme.metrics.textSize[20],
fontWeight: theme.metrics.fontWeight.semiBold,
},
}));
|