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>
          <div className='training-meta-wrap'>
            <TrainingMeta training={training} />
          </div>
          <TrainingProgram training={training} />
        </>
      ) : null}

      <TrainingArchive />

      <style jsx>
        {`
          .next-training {
            padding: 1.2em 0.3em;
          }

          .training-title {
            grid-area: title;
            margin: 0.3em 0;
            padding: 0;
            font-size: 3.4rem;
            font-weight: 300;
            text-transform: uppercase;
            color: ${theme.colors.offWhite};
            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: 1rem;
            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 {
              padding: 3em 3em;
              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;
              background-image: linear-gradient(
                to bottom,
                #84cae7,
                #84cae7 400px,
                #c7c7c7 400px,
                #c7c7c7 401px,
                #ebebeb 401px
              );
            }
            .training-title {
              font-size: 5rem;
              margin: 0;
            }
            .training-title::before {
              font-size: 1.4rem;
              display: block;
              position: absolute;
              top: -0.7rem;
              left: 0.4rem;
              color: ${theme.colors.darkerblue};
            }
            .training-meta-wrap {
              filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.18));
            }
            .next-training :global(.training-meta) {
              grid-area: info;
              width: 700px;
              margin-left: auto;
              padding: 2em;
              padding-top: 11.5em;
              color: ${theme.colors.offWhite};
              height: 300px;
              background-color: #efefef;
              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%);
            }
            .next-training :global(.training-program) {
              padding: 2em;
              background-color: #ebebeb;
              /* box-shadow: ${theme.bs}; */
              filter: drop-shadow(0 0 12px rgba(0,0,0,0.18));
            }
          }
        `}
      </style>
    </section>
  )
}

export default Home