Duration Duration.tsx

40% Statements 2/5

0% Branches 0/9

0% Functions 0/1

40% Lines 2/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27  
 
 
 
4x
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { FC } from 'react';
import { SvgIcon } from '../../SvgIcon';
import { useTranslation } from 'react-i18next';
 
const styles = require('./Duration.module.css');
 
export const Duration: FC<{
  classes?: string;
  duration: { hours: number, minutes: number };
  size?: 'normal' | 'small'
}> = ({
  classes,
  duration,
  size= 'normal'
}) => {
  const { t } = useTranslation();
  const iconSize = size === 'small' ? 14 : 16;
 
  return (
    <div className={`${styles.Duration} ${size === 'small' ? styles.small : ''} ${classes ?? ''}`}>
      <SvgIcon icon={{ name: 'clock', width: iconSize, height: iconSize, fill: '#144154' }} />
      <span>{t('duration')}:</span>
      <span className={styles.DurationHours}>{`${duration.hours} ${t('h.')}`}</span>
      {duration.minutes ? <span className={styles.DurationMinutes}>{`${duration.minutes} ${t('m.')}`}</span> : null}
    </div>
  );
};