All files / src/pages index.tsx

100% Statements 9/9
100% Branches 0/0
100% Functions 1/1
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109            1x 1x 1x 1x 1x 1x   1x                                 1x                 1x                                                                                                                                          
import React from 'react';
import { Categories, Hero, Layout, ProductSlider } from '../components';
import { graphql } from 'gatsby';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
 
const Home = ({ data }) => {
  const { t } = useTranslation();
  const categories = data.categories.nodes;
  const parkingProducts = data.parking.nodes;
  const experienceProducts = data.experience.nodes;
  const bicycleProducts = data.bicycle.nodes;
 
  return (
    <Layout>
      <Helmet>
        <title>{t('sitename')}</title>
      </Helmet>
 
      <Hero />
      <Categories categories={categories} />
      <ProductSlider title={t('parking.title')} products={parkingProducts} />
      <ProductSlider title={t('experience.title')} products={experienceProducts} />
      <ProductSlider title={t('bicycle.title')} products={bicycleProducts} />
    </Layout>
  )
}
 
export default Home
 
export const HomeProductData = graphql`
  fragment HomeProductData on StrapiProduct {
    productType
    name
    strapiId
    slug
  }
`;
 
export const query = graphql`
  {
    categories: allStrapiCategory {
      nodes {
        strapiId
        name
        slug
        images {
          localFile {
            childImageSharp {
              gatsbyImageData(
                aspectRatio: 2.75
                placeholder: BLURRED
                layout: FULL_WIDTH
                formats: JPG
              )
            }
          }
        } 
      }
    }
    parking: allStrapiProduct(filter: {categories: {elemMatch: {id: {eq: 4}}}}) {
      nodes {
        ...HomeProductData
        thumbnail {
          childImageSharp {
            gatsbyImageData(
              aspectRatio: 1.25
              placeholder: BLURRED
              layout: CONSTRAINED
              formats: JPG
            )
          }
        }
      }
    }
    experience: allStrapiProduct(filter: {categories: {elemMatch: {id: {eq: 6}}}}) {
      nodes {
        ...HomeProductData
        thumbnail {
          childImageSharp {
            gatsbyImageData(
              aspectRatio: 1.25
              placeholder: BLURRED
              layout: CONSTRAINED
              formats: JPG
            )
          }
        }
      }
    }
    bicycle: allStrapiProduct(filter: {categories: {elemMatch: {id: {eq: 8}}}}) {
      nodes {
        ...HomeProductData
        thumbnail {
          childImageSharp {
            gatsbyImageData(
              aspectRatio: 1.25
              placeholder: BLURRED
              layout: CONSTRAINED
              formats: JPG
              transformOptions: {fit: CONTAIN}
              backgroundColor: "#FFFFFF"
            )
          }
        }
      }
    }
  }
`