u-fit/frontend/src/training/components/TrainingBlock.tsx

import ExerciseComposition from './ExerciseComposition'
import { calculateDuration, formatTime } from '../utils'
import { TBlockInstance } from '../types'

const TrainingBlock = ({ blockInstance }: { blockInstance?: TBlockInstance }) => {
  if (!blockInstance || !blockInstance.block) return null

  const duration = calculateDuration(blockInstance)
  const { title, blocks, exercises } = blockInstance.block
  return (
    <div>
      {title && (
        <h3>
          <span className='block-title'>{title}</span>{' '}
          <span className='block-time'>{formatTime(duration)}</span>
        </h3>
      )}
      {blocks && blocks.map((block) => <TrainingBlock key={block.id} blockInstance={block} />)}
      {exercises?.length ? <ExerciseComposition exercises={exercises} duration={duration} /> : null}

      <style jsx>
        {`
          .block-time {
            color: gray;
            font-size: 90%;
          }
          .block-time::before {
            content: '(';
          }
          .block-time::after {
            content: ')';
          }
        `}
      </style>
    </div>
  )
}
export default TrainingBlock