36 lines
711 B
TypeScript
36 lines
711 B
TypeScript
import { HStack, Icon, Text } from 'native-base';
|
|
import { MaterialIcons } from '@expo/vector-icons';
|
|
|
|
type DurationComponentProps = {
|
|
length: number | undefined;
|
|
};
|
|
|
|
const DurationComponent = ({ length }: DurationComponentProps) => {
|
|
const minutes = Math.floor((length ?? 0) / 60);
|
|
const seconds = Math.round((length ?? 0) - minutes * 60);
|
|
|
|
return (
|
|
<HStack space={3}>
|
|
<Icon
|
|
as={MaterialIcons}
|
|
name="timer"
|
|
size={'20px'}
|
|
color="coolGray.800"
|
|
_dark={{
|
|
color: 'warmGray.50',
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{
|
|
flexShrink: 0,
|
|
}}
|
|
fontSize={'16px'}
|
|
>
|
|
{length ? `${minutes}'${seconds}` : "--'--"}
|
|
</Text>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default DurationComponent;
|