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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 2x 11x 11x 1x 1x 1x 11x | import React, { memo } from 'react';
import { Text, View } from 'react-native';
import { Switch } from '@repo/ui/components/Switch';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { textStyles } from '@repo/ui/themes/typography';
interface MealConfig {
breakfast: boolean;
lunch: boolean;
vegetarian: boolean;
}
interface MealConfigSwitchesProps extends MealConfig {
onChange: (config: MealConfig) => void;
}
export const MealConfigSwitches = memo(function MealConfigSwitches({
breakfast,
lunch,
vegetarian,
onChange,
}: MealConfigSwitchesProps) {
const styles = useStyles();
return (
<View style={styles.section}>
<View style={styles.row}>
<Text style={styles.mealLabel}>BREAKFAST</Text>
<Switch
value={breakfast}
onValueChange={value =>
onChange({ breakfast: value, lunch, vegetarian })
}
testID="breakfast-switch"
accessibilityLabel="Breakfast"
/>
</View>
<View style={styles.row}>
<Text style={styles.mealLabel}>LUNCH</Text>
<Switch
value={lunch}
onValueChange={value =>
onChange({ breakfast, lunch: value, vegetarian })
}
testID="lunch-switch"
accessibilityLabel="Lunch"
/>
</View>
<View style={styles.row}>
<Text style={styles.veganLabel}>Vegan meal</Text>
<Switch
value={vegetarian}
disabled={!lunch}
onValueChange={value =>
onChange({ breakfast, lunch, vegetarian: value })
}
testID="vegetarian-switch"
accessibilityLabel="Vegan meal"
/>
</View>
</View>
);
});
const useStyles = makeStyles(theme => ({
section: {
backgroundColor: theme.colors.background.surface,
padding: theme.metrics.spacing[4],
borderRadius: theme.metrics.borderRadius[2],
gap: theme.metrics.spacing[3],
},
row: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
mealLabel: {
...textStyles.content.semiBold,
fontWeight: theme.metrics.fontWeight.semiBold,
textTransform: 'uppercase',
color: theme.colors.text.onBehalf,
fontSize: theme.metrics.textSize[32],
},
veganLabel: {
...textStyles.content.regular,
color: theme.colors.text.onBehalf,
},
}));
|