u-fit/frontend/pages/index.tsx

import { useTrainingQuery } from '../src/gql'
import { TrainingArchive } from '../src/training'
import { useState, useEffect } from 'react'
import { TTraining } from '../src/training/types'
import TrainingProgram from '../src/training/components/TrainingProgram'
import TrainingMeta from '../src/training/components/TrainingMeta'
import theme from '../src/styles/theme'

const Home = () => {
  const { data, error, loading } = useTrainingQuery()
  const [training, setTraining] = useState<undefined | TTraining>()
  console.log(data)

  useEffect(() => {
    if (data?.training) {
      setTraining(data.training)
    }
  }, [data])

  return (
    <section className='next-training'>
      {training ? (
        <>
          <h1 className='training-title'>{training.title}</h1>
          <TrainingMeta training={training} />
          <TrainingProgram training={training} />
        </>
      ) : null}

      <TrainingArchive />

      <style jsx>
        {`
          .training-title {
            grid-area: title;
            margin: 0.3em 0;
            padding: 0;
            font-size: 3.4rem;
            font-weight: 300;
            text-transform: uppercase;
            color: ${theme.colors.blue};
            padding: 0;
            margin: 0.3em 0;
            position: relative;
          }
          .training-title::before {
            content: 'your next training:';
            text-transform: none;
            font-weight: 900;
            font-size: 1.1rem;
            display: block;
            position: absolute;
            top: -1rem;
            left: 01rem;
            color: ${theme.colors.darkerblue};
          }

          :global(.training-program) {
            grid-area: program;
          }
          :global(.training-archive) {
            grid-area: archive;
          }
          :global(.training-meta) {
            grid-area: info;
          }
          @media (min-width: 600px) {
            .next-training {
              display: grid;
              grid-template-columns: 1fr auto;
              grid-template-areas:
                'title    info'
                'program  program'
                'archive  archive';
              column-gap: 1em;
            }
          }
          @media (min-width: 1024px) {
            .next-training {
              display: grid;
              grid-template-columns: 2fr 1fr;
              grid-template-rows: auto 1fr auto;
              grid-template-areas:
                'title    program'
                'info     program'
                'archive  program';
              column-gap: 2em;
            }
            .training-title {
              font-size: 8rem;
              margin: 0;
            }
            .training-title::before {
              font-size: 1.4rem;
              display: block;
              position: absolute;
              top: -0.4rem;
              left: 2.4rem;
              color: ${theme.colors.darkerblue};
            }
            :global(.training-meta) {
              grid-area: info;
              height: 350px;
              background-image: url('/media/man_working_out.jpg');
              background-size: auto 100%;
              background-repeat: no-repeat;
              background-position: right center;
              clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 0% 0%);
            }
          }
        `}
      </style>
    </section>
  )
}

export default Home