All files / src/pages fahrradverleih-buchen.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react"
import { BookingHero, Layout, BookingDescription, BookingFAQ, BookingPlaces } from "../components";
import { graphql } from 'gatsby'
import { useTranslation } from 'react-i18next';
 
const Fahrradverleich = ({ data }) => {
  const { t } = useTranslation();
 
  return (
    <Layout
      before={<BookingHero
        slug={data.category.slug}
        title={t('bicycle.book')}
        images={data.category.images}
        locations={data.category.locations}
      />}
    >
      <BookingDescription
        image={data.category.descriptionImage}
        text={data.category.description}
      />
      {data.category.faq.length ? <BookingFAQ faq={data.category.faq} /> : null}
      {data.category.products.length ? <BookingPlaces products={data.category.products} title={t('otherOffers')} /> : null}
    </Layout>
  )
};
 
export default Fahrradverleich;
 
export const query = graphql`{
  category: strapiCategory(productType: {eq: "bicycle"}) {
    name
    slug
    description
    descriptionImage {
      childImageSharp {
        gatsbyImageData(
          aspectRatio: 2
          layout: CONSTRAINED
          width: 1000
          placeholder: BLURRED
          formats: JPG
        )
      }
    }
    faq {
      question
      answer
    }
    images {
      localFile {
        childImageSharp {
          gatsbyImageData(layout: FULL_WIDTH, formats: JPG, placeholder: BLURRED)
        }
      }
    }
    locations {
      value
      name
      portId
    }
    products {
      name
      price
      thumbnail {
        childImageSharp {
          gatsbyImageData(
            layout: CONSTRAINED
            width: 500
            aspectRatio: 1.25
            formats: JPG
            placeholder: BLURRED
            transformOptions: {fit: CONTAIN}
            backgroundColor: "#FFFFFF"
          )
        }
      }
      sku
      slug
    }
  }
}
`