boxons/components/shared/NumberSelector.tsx

47 lines
981 B
TypeScript

import { Text, View } from '@/components/shared/Themed';
import styled from '@emotion/native';
import { HorizontalSpacer } from './Spacers';
type FinishContentProps = {
reps: number;
setReps: (reps: number) => void;
};
export default function NumberSelector({
setReps,
reps
}: FinishContentProps) {
const addReps: () => void = () => {
setReps(reps + 1);
}
const removeReps: () => void = () => {
if (reps === 0) return;
setReps(reps - 1);
}
return (
<Row>
<CustomText onPress={removeReps}>-</CustomText>
<HorizontalSpacer widthUnits={5} />
<CustomText>{reps}</CustomText>
<HorizontalSpacer widthUnits={5} />
<CustomText onPress={addReps}>+</CustomText>
</Row>
);
}
const Row = styled(View)(() => ({
flexDirection: 'row',
backgroundColor: 'black'
}));
const CustomText = styled(Text)(({ theme }) => ({
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
color: theme.colors.fixed.white
}))