u-fit/frontend/pages/index.tsx

//import initialData from '../initial-data'
import { usePublishedTrainingsQuery } from '../src/gql'
import { Training, TrainingArchive } from '../src/training'
import { Page } from '../src/app'
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'
import { formatTime, calculateDuration } from '../src/training/utils'

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

  useEffect(() => {
    if (data?.publishedTrainings && data.publishedTrainings.length > 0) {
      setTraining(data.publishedTrainings[0])
    }
  }, [data])

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

        <TrainingArchive />

        <style jsx>
          {`
            .next-training {
              padding: 1em 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.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;
                padding: 2em 3em;
              }
            }
            @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;
                padding: 2em 3em;
              }
              .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>
    </Page>
  )
}

export default Home