91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import { Text, View } from '@/components/shared/Themed';
|
|
import styled from '@emotion/native';
|
|
import { formatTime } from '@/components/shared/business/timeHelpers';
|
|
import Button from '@/components/shared/Button';
|
|
import { VerticalSpacer } from '@/components/shared/Spacers';
|
|
import { TimerBgColor } from '@/components/useCases/timer/business/type';
|
|
import { useNavigation } from 'expo-router';
|
|
import { NativeStackNavigationProp } from 'react-native-screens/lib/typescript/native-stack/types';
|
|
import { RootStackParamList } from '@/app/RootStackParamList';
|
|
import { i18n } from '@/app/i18n/i18n';
|
|
|
|
interface TimerContentProps {
|
|
isWorkPhase: boolean;
|
|
timeLeft: number;
|
|
reps: number;
|
|
currentRep: number;
|
|
isRunning: boolean;
|
|
handleStop: () => void;
|
|
handleContine: () => void;
|
|
bgColor: TimerBgColor;
|
|
}
|
|
|
|
type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Dashboard'>;
|
|
|
|
const t = i18n.scoped('timer.timerContent');
|
|
|
|
export default function TimerContent({
|
|
isWorkPhase,
|
|
timeLeft,
|
|
reps,
|
|
currentRep,
|
|
isRunning,
|
|
handleStop,
|
|
handleContine,
|
|
bgColor,
|
|
}: TimerContentProps ) {
|
|
const navigation = useNavigation<NavigationProp>();
|
|
|
|
return (
|
|
<>
|
|
<Title>{isWorkPhase ? t('fight') : t('rest')}</Title>
|
|
|
|
<VerticalSpacer heightUnits={8} />
|
|
|
|
<Time>
|
|
{formatTime(timeLeft)}
|
|
</Time>
|
|
|
|
<VerticalSpacer heightUnits={8} />
|
|
|
|
<Reps>{currentRep} / {reps}</Reps>
|
|
|
|
<VerticalSpacer heightUnits={8} />
|
|
|
|
<ButtonContainer bgColor={bgColor}>
|
|
{isRunning ? (
|
|
<Button label={t('stop')} onPress={handleStop} />
|
|
) : (
|
|
<Button label={t('start')} onPress={handleContine} />
|
|
)}
|
|
|
|
<VerticalSpacer heightUnits={3} />
|
|
|
|
<Button label={i18n.t('back')} onPress={() => navigation.navigate('Dashboard')} />
|
|
</ButtonContainer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const ButtonContainer = styled(View)<{ bgColor: TimerBgColor }>(({ theme, bgColor }) => ({
|
|
backgroundColor: theme.colors[bgColor]
|
|
}));
|
|
|
|
const Title = styled(Text)(({ theme }) => ({
|
|
fontSize: 50,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.white
|
|
}));
|
|
|
|
const Time = styled(Text)(({ theme }) => ({
|
|
fontSize: 100,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.white
|
|
}));
|
|
|
|
const Reps = styled(Text)(({ theme }) => ({
|
|
fontSize: 30,
|
|
fontWeight: 'bold',
|
|
color: theme.colors.white
|
|
}));
|