Duration component

2023-09-25 14:24:08 +02:00
parent 2d90c6eec1
commit 5395bbb03a
4 changed files with 36 additions and 21 deletions
@@ -0,0 +1,29 @@
+import { Box, Icon, Text } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+type DurationComponentProps = {
+	length: number;
+};
+
+const DurationComponent = ({ length }: DurationComponentProps) => {
+	const minutes = Math.floor(length / 60);
+	const seconds = Math.round(length - minutes * 60);
+
+	return (
+		<Box flexDirection={'row'} >
+			<Icon as={MaterialIcons} name="timer" color="coolGray.800" _dark={{
+		color: "warmGray.50"
+		}} />
+			<Text
+				style={{
+					flexShrink: 0,
+				}}
+				fontSize={'sm'}
+			>
+				{`${minutes}'${seconds}` ?? '--\'--'}
+			</Text>
+		</Box>
+	);
+};
+
+export default DurationComponent;