component---src-pages-templates-services-tsx-8562767032e376b86b28.js.map

{"version":3,"file":"component---src-pages-templates-services-tsx-8562767032e376b86b28.js","mappings":"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","sources":["webpack://code-cave/./src/components/services/servicePreview.tsx","webpack://code-cave/./src/components/services/servicesCarouselButtons.tsx","webpack://code-cave/./src/components/services/servicesCarousel.tsx","webpack://code-cave/./src/pagesTemplates/services.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { IServicePreview } from \"../../types/services.type\";\n\nconst ServicePreview = ({\n  service,\n  className,\n  imgClassName,\n}: {\n  service: IServicePreview;\n  className?: string;\n  imgClassName?: string;\n}) => {\n  const {\n    html,\n    frontmatter: {\n      title,\n      keywords,\n      image: { publicURL: imageURL },\n    },\n  } = service;\n\n  return (\n    <div\n      className={`service-preview origin-[5%_50%] break-inside-avoid flex flex-col gap-5 sm:px-8 py-8 text-secondary-100 cursor-pointer ${className}`}\n      itemScope\n      itemType=\"https://schema.org/Service\"\n    >\n      <div className=\"flex items-center gap-5\">\n        <div className={`masked-icon h-10 w-10 ${imgClassName ?? \"\"}`}\n          style={\n            {\n              maskImage: `url(${imageURL})`, \n              WebkitMaskImage: `url(${imageURL})`\n            }\n          }>\n        </div>\n        <h2 className=\"font-bold text-2xl\" itemProp=\"serviceType\">\n          {title}\n        </h2>\n      </div>\n      <div\n        className={`text-lg text-secondary-70`}\n        dangerouslySetInnerHTML={{ __html: html }}\n        itemProp=\"description\"\n      />\n      {keywords ? (\n        <div className=\"flex gap-2 flex-wrap w-full\">\n          {keywords.map((hashtag) => (\n            <p\n              key={hashtag}\n              className=\"h-8 flex items-center whitespace-nowrap px-4 bg-main-70 text-secondary-70 rounded-lg border-primary-70 border border-solid\"\n            >\n              {hashtag}\n            </p>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nexport default ServicePreview;\n","import React, {\n  ComponentPropsWithRef,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { EmblaCarouselType } from \"embla-carousel\";\nimport { IServicePreview } from \"../../types/services.type\";\n\ntype UseDotButtonType = {\n  selectedIndex: number;\n  onServiceButtonClick: (index: number) => void;\n};\n\nexport const useServicesButtons = (\n  emblaApi: EmblaCarouselType | undefined,\n  onButtonClick?: (emblaApi: EmblaCarouselType) => void\n): UseDotButtonType => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n\n  const onServiceButtonClick = useCallback(\n    (index: number) => {\n      if (!emblaApi) return;\n      emblaApi.scrollTo(index);\n      if (onButtonClick) onButtonClick(emblaApi);\n    },\n    [emblaApi, onButtonClick]\n  );\n\n  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setSelectedIndex(emblaApi.selectedScrollSnap());\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    onSelect(emblaApi);\n\n    emblaApi.on(\"reInit\", onSelect).on(\"select\", onSelect);\n  }, [emblaApi, onSelect]);\n\n  return {\n    selectedIndex,\n    onServiceButtonClick,\n  };\n};\n\ninterface IServiceCarouselButtonProps extends ComponentPropsWithRef<\"button\"> {\n  service: IServicePreview;\n  imgClassName?: string;\n}\n\nexport const ServiceCarouselButton = ({\n  service,\n  className,\n  imgClassName,\n  ...attr\n}: IServiceCarouselButtonProps) => {\n  const {\n    frontmatter: {\n      title,\n      image: { publicURL: imageURL },\n    },\n  } = service;\n\n  return (\n    <button\n      aria-label=\"view service\"\n      className={`flex gap-5 min-h-10 items-center ${className}`}\n      type=\"button\"\n      {...attr}\n    >\n      <div className={`masked-icon py-1.5 h-7 w-7 ${imgClassName ?? \"\"}`}\n          style={\n            {\n              maskImage: `url(${imageURL})`, \n              WebkitMaskImage: `url(${imageURL})`\n            }\n          }></div>\n      <h2 className=\"hidden lg:block font-semibold text-lg text-secondary-100 text-start\">\n        {title}\n      </h2>\n    </button>\n  );\n};\n","import React, { useCallback, useEffect, useRef } from \"react\";\nimport { EmblaCarouselType, EmblaEventType } from \"embla-carousel\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\nimport { IServicePreview } from \"../../types/services.type\";\n\nimport ServicePreview from \"./servicePreview\";\nimport {\n  ServiceCarouselButton,\n  useServicesButtons,\n} from \"./servicesCarouselButtons\";\n\nconst TWEEN_FACTOR_BASE = 0.2;\nconst numberWithinRange = (number: number, min: number, max: number): number =>\n  Math.min(Math.max(number, min), max);\n\nconst ServicesCarousel = ({ services }: { services: IServicePreview[] }) => {\n  const [emblaRef, emblaApi] = useEmblaCarousel(\n    {\n      axis: \"y\",\n      loop: true,\n      skipSnaps: true,\n      align: \"center\",\n    }\n  );\n\n  const tweenFactor = useRef(0);\n  const tweenNodes = useRef<HTMLElement[]>([]);\n\n  const { selectedIndex, onServiceButtonClick } = useServicesButtons(emblaApi);\n\n  const setTweenNodes = useCallback((emblaApi: EmblaCarouselType): void => {\n    tweenNodes.current = emblaApi.slideNodes().map((slideNode) => {\n      return slideNode.querySelector(\".service-preview\") as HTMLElement;\n    });\n  }, []);\n\n  const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => {\n    tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length;\n  }, []);\n\n  const tweenScale = useCallback(\n    (emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => {\n      const engine = emblaApi.internalEngine();\n      const scrollProgress = emblaApi.scrollProgress();\n      const slidesInView = emblaApi.slidesInView();\n      const isScrollEvent = eventName === \"scroll\";\n\n      emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {\n        let diffToTarget = scrollSnap - scrollProgress;\n        const slidesInSnap = engine.slideRegistry[snapIndex];\n\n        slidesInSnap.forEach((slideIndex) => {\n          if (isScrollEvent && !slidesInView.includes(slideIndex)) return;\n\n          if (engine.options.loop) {\n            engine.slideLooper.loopPoints.forEach((loopItem) => {\n              const target = loopItem.target();\n\n              if (slideIndex === loopItem.index && target !== 0) {\n                const sign = Math.sign(target);\n\n                if (sign === -1) {\n                  diffToTarget = scrollSnap - (1 + scrollProgress);\n                }\n                if (sign === 1) {\n                  diffToTarget = scrollSnap + (1 - scrollProgress);\n                }\n              }\n            });\n          }\n\n          const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current);\n          const scale = numberWithinRange(tweenValue, 0, 1);\n          const tweenNode = tweenNodes.current[slideIndex];\n          tweenNode.style.transform = `scale(${scale})`;\n        });\n      });\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    setTweenNodes(emblaApi);\n    setTweenFactor(emblaApi);\n    tweenScale(emblaApi);\n\n    emblaApi\n      .on(\"reInit\", setTweenNodes)\n      .on(\"reInit\", setTweenFactor)\n      .on(\"reInit\", tweenScale)\n      .on(\"scroll\", tweenScale)\n      .on(\"slideFocus\", tweenScale);\n  }, [emblaApi, tweenScale]);\n\n  return (\n    <>\n      <div className=\"hidden sm:flex flex-col gap-5 p-8 lg:basis-[410px] shrink-0\">\n        {services\n          ? services.map((service, i) => (\n              <ServiceCarouselButton\n                key={`dot-${service.id}`}\n                service={service}\n                onClick={() => onServiceButtonClick(i)}\n                className={`${\n                  i === selectedIndex\n                    ? \"\"\n                    : \"brightness-[0.7] hover:brightness-100\"\n                }`}\n                imgClassName={`${\n                  i === selectedIndex ? \"bg-primary-70\" : \"bg-secondary-100\"\n                }`}\n              />\n            ))\n          : null}\n      </div>\n      <div\n        ref={emblaRef}\n        className=\"hidden sm:block overflow-hidden basis-full\"\n      >\n        <div\n          style={{ backfaceVisibility: \"hidden\" }}\n          className=\"flex flex-col touch-pan-x h-[1000px] sm:h-[900px] md:h-[750px]\"\n        >\n          {services\n            ? services.map((service, i) => (\n                <div\n                  key={service.id}\n                  onClick={() => onServiceButtonClick(i)}\n                  className=\"grow-0 shrink-0 basis-1/3 min-h-0 select-none flex items-center\"\n                >\n                  <ServicePreview\n                    service={service}\n                    className={`select-none ${\n                      i === selectedIndex ? \"\" : \"brightness-[0.7]\"\n                    }`}\n                    imgClassName={`select-none ${\n                      i === selectedIndex ? \"bg-primary-70\" : \"bg-secondary-100\"\n                    }`}\n                  />\n                </div>\n              ))\n            : null}\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ServicesCarousel;\n","import React from \"react\";\nimport { HeadFC, HeadProps, PageProps } from \"gatsby\";\nimport { graphql } from \"gatsby\";\nimport { getImage } from \"gatsby-plugin-image\";\n\nimport {\n  IServicesPageContext,\n  IServicesPreviewQueryResult,\n} from \"../types/services.type\";\n\nimport Border from \"../assets/common/border.svg\";\n\nimport Banner from \"../components/common/banner\";\nimport ContentContainer from \"../components/common/contentContainer\";\nimport { HeadSeo } from \"../components/common/metadata\";\nimport ContactFormSection from \"../components/forms/contactFormSection\";\nimport ServicesCarousel from \"../components/services/servicesCarousel\";\nimport ServicePreview from \"../components/services/servicePreview\";\n\nconst Services = ({\n  data,\n  pageContext: { markupData, lang },\n}: PageProps<IServicesPreviewQueryResult, IServicesPageContext>) => {\n  const services = data.allMarkdownRemark?.nodes;\n\n  return (\n    <>\n      <Banner\n        heightClass=\"lg:h-32\"\n        titleBlockClassName=\"w-full\"\n        title={markupData.bannerTitle}\n      />\n      <div>\n        <ContentContainer\n          maxWidthClass=\"max-w-[1280px]\"\n          className=\"flex flex-col sm:flex-row items-start sm:justify-end py-6 sm:py-10 lg:!px-20 gap-0 sm:gap-5 lg:gap-[48px]\"\n        >\n          {services ? <ServicesCarousel services={services} /> : null}\n          {services\n            ? services.map((service, i) => (\n                <ServicePreview\n                  key={service.id}\n                  service={service}\n                  className={`sm:hidden select-none`}\n                  imgClassName=\"bg-secondary-100\"\n                />\n              ))\n            : null}\n        </ContentContainer>\n      </div>\n      <ContactFormSection lang={lang} />\n    </>\n  );\n};\n\nexport default Services;\n\nexport const Head: HeadFC<\n  IServicesPreviewQueryResult,\n  IServicesPageContext\n> = ({\n  pageContext: { markupData, site, lang },\n  location,\n}: HeadProps<IServicesPreviewQueryResult, IServicesPageContext>) => (\n  <>\n    <HeadSeo\n      title={`${markupData.head} | ${markupData.bannerTitle.toUpperCase()}`}\n      description={site.description}\n      siteUrl={site.siteUrl}\n      path={location.pathname}\n      lang={lang}\n    />\n  </>\n);\n\nexport const query = graphql`\n  query ($lang: String) {\n    allMarkdownRemark(\n      filter: {\n        fields: { sourceName: { eq: \"services\" }, language: { eq: $lang } }\n      }\n    ) {\n      nodes {\n        id\n        html\n        frontmatter {\n          title\n          keywords\n          image {\n            publicURL\n          }\n        }\n      }\n    }\n  }\n`;\n"],"names":["_ref","service","className","imgClassName","html","frontmatter","title","keywords","image","publicURL","imageURL","___EmotionJSX","itemScope","itemType","style","maskImage","WebkitMaskImage","itemProp","dangerouslySetInnerHTML","__html","map","hashtag","key","ServiceCarouselButton","attr","_extends","type","services","emblaRef","emblaApi","useEmblaCarousel","axis","loop","skipSnaps","align","tweenFactor","useRef","tweenNodes","selectedIndex","onServiceButtonClick","useServicesButtons","onButtonClick","setSelectedIndex","useState","useCallback","index","scrollTo","onSelect","selectedScrollSnap","useEffect","on","setTweenNodes","current","slideNodes","slideNode","querySelector","setTweenFactor","scrollSnapList","length","tweenScale","eventName","engine","internalEngine","scrollProgress","slidesInView","isScrollEvent","forEach","scrollSnap","snapIndex","diffToTarget","slideRegistry","slideIndex","includes","options","slideLooper","loopPoints","loopItem","target","sign","Math","tweenValue","abs","scale","number","min","max","numberWithinRange","transform","React","i","id","onClick","ref","backfaceVisibility","ServicePreview","_data$allMarkdownRema","data","pageContext","markupData","lang","allMarkdownRemark","nodes","Banner","heightClass","titleBlockClassName","bannerTitle","ContentContainer","maxWidthClass","ServicesCarousel","ContactFormSection","Head","_ref2","site","location","HeadSeo","head","toUpperCase","description","siteUrl","path","pathname"],"sourceRoot":""}