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
}) => {
  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>
        {`
          section {
            display: grid;
          }
          .block-time {
            color: gray;
            font-size: 90%;
          }
          .block-time::before {
            content: '(';
          }
          .block-time::after {
            content: ')';
          }
        `}
      </style>
    </div>
  )
}
export default TrainingBlock