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

import theme from '../../styles/theme'

import TrainingBlock from './TrainingBlock'
import Link from 'next/link'
import { TTraining } from '../types'
import TrainingMeta from './TrainingMeta'
import { formatTime, calculateDuration } from '../utils'
import TrainingProgram from './TrainingProgram'

const Training = ({ training }: { training: TTraining }) => {
  return (
    <article>
      <h2>
        <span className='program-title'>{training.title}</span>{' '}
        <span className='program-time'>{formatTime(calculateDuration(training.blocks))}</span>
      </h2>

      <TrainingMeta training={training} />

      <TrainingProgram training={training} />

      <style jsx>
        {`
          article {
            display: grid;
            grid-template-areas:
              'title title'
              'information placeholder'
              'content content';
            grid-template-columns: 1fr 2fr;
            background-image: url('/media/man_working_out.jpg');
            background-size: auto 400px;
            background-repeat: no-repeat;
            background-position: center 0;
            margin: 2em 0;
          }

          article > * {
            padding: 0.2em 1em;
            margin: 0;
          }

          article > h2 {
            grid-area: title;
            font-weight: 900;
            font-size: 160%;
            background: ${theme.colors.darkerblue};
            color: ${theme.colors.offWhite};
          }

          section {
            grid-area: content;
            padding: 1em 2em;
          }

          span.caption {
          }

          button {
            border: none;
            background: ${theme.colors.darkblue};
            color: ${theme.colors.offWhite};
            font-weight: 900;
            padding: 0.5rem;
            cursor: pointer;
          }
        `}
      </style>
    </article>
  )
}

export default Training