88 lines
2.2 KiB
TypeScript
88 lines
2.2 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';
|
||
|
|
|
||
|
|
interface TimerContentProps {
|
||
|
|
isWorkPhase: boolean;
|
||
|
|
timeLeft: number;
|
||
|
|
reps: number;
|
||
|
|
currentRep: number;
|
||
|
|
isRunning: boolean;
|
||
|
|
handleStop: () => void;
|
||
|
|
handleContine: () => void;
|
||
|
|
bgColor: TimerBgColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'dashboard'>;
|
||
|
|
|
||
|
|
export default function TimerContent({
|
||
|
|
isWorkPhase,
|
||
|
|
timeLeft,
|
||
|
|
reps,
|
||
|
|
currentRep,
|
||
|
|
isRunning,
|
||
|
|
handleStop,
|
||
|
|
handleContine,
|
||
|
|
bgColor,
|
||
|
|
}: TimerContentProps ) {
|
||
|
|
const navigation = useNavigation<NavigationProp>();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Title>{isWorkPhase ? 'Fight' : 'Repos'}</Title>
|
||
|
|
|
||
|
|
<VerticalSpacer heightUnits={8} />
|
||
|
|
|
||
|
|
<Time>
|
||
|
|
{formatTime(timeLeft)}
|
||
|
|
</Time>
|
||
|
|
|
||
|
|
<VerticalSpacer heightUnits={8} />
|
||
|
|
|
||
|
|
<Reps>{currentRep} / {reps}</Reps>
|
||
|
|
|
||
|
|
<VerticalSpacer heightUnits={8} />
|
||
|
|
|
||
|
|
<ButtonContainer bgColor={bgColor}>
|
||
|
|
{isRunning ? (
|
||
|
|
<Button label="Stop" onPress={handleStop} />
|
||
|
|
) : (
|
||
|
|
<Button label="Start" onPress={handleContine} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
<VerticalSpacer heightUnits={3} />
|
||
|
|
|
||
|
|
<Button label="Retour" 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
|
||
|
|
}));
|