-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-pages-templates-services-tsx-e4d2d12096012ba30740.js.map
1 lines (1 loc) · 16.7 KB
/
component---src-pages-templates-services-tsx-e4d2d12096012ba30740.js.map
1
{"version":3,"file":"component---src-pages-templates-services-tsx-e4d2d12096012ba30740.js","mappings":"wRAyDA,MArDuBA,IAMhB,IANiB,QACtBC,EAAO,UACPC,GAIDF,EACC,MAAM,KACJG,EACAC,aAAa,MACXC,EAAK,SACLC,EACAC,OAASC,UAAWC,KAEpBR,EAEJ,OACES,EAAAA,EAAAA,IAAA,OACER,UAAW,yHAAyHA,IACpIS,WAAS,EACTC,SAAS,+BAETF,EAAAA,EAAAA,IAAA,OAAKR,UAAU,4BACbQ,EAAAA,EAAAA,IAAA,OACEG,IAAKJ,EACLK,IAAK,GAAGT,SACRH,UAAU,sBAEZQ,EAAAA,EAAAA,IAAA,MAAIR,UAAU,qBAAqBa,SAAS,eACzCV,KAGLK,EAAAA,EAAAA,IAAA,OACER,UAAW,8BACXc,wBAAyB,CAAEC,OAAQd,GACnCY,SAAS,gBAEVT,GACCI,EAAAA,EAAAA,IAAA,OAAKR,UAAU,+BACZI,EAASY,KAAKC,IACbT,EAAAA,EAAAA,IAAA,KACEU,IAAKD,EACLjB,UAAU,wFAETiB,MAIL,KACA,E,UCvCH,MAqCME,EAAwBrB,IAID,IAJE,QACpCC,EAAO,UACPC,KACGoB,GACyBtB,EAC5B,MACEI,aAAa,MACXC,EACAE,OAASC,UAAWC,KAEpBR,EAEJ,OACES,EAAAA,EAAAA,IAAA,UAAAa,EAAAA,EAAAA,GAAA,CACE,aAAW,eACXrB,UAAW,oCAAoCA,IAC/CsB,KAAK,UACDF,IAEJZ,EAAAA,EAAAA,IAAA,OAAKR,UAAU,WACbQ,EAAAA,EAAAA,IAAA,OAAKG,IAAKJ,EAAUK,IAAK,GAAGT,SAAcH,UAAU,qBAEtDQ,EAAAA,EAAAA,IAAA,MAAIR,UAAU,uEACXG,GAEI,ECqEb,MAjIyBL,IAAoD,IAAnD,SAAEyB,GAA2CzB,EACrE,MAAO0B,EAAUC,IAAYC,EAAAA,EAAAA,GAC3B,CACEC,KAAM,IACNC,MAAM,EACNC,WAAW,EACXC,MAAO,WAILC,GAAcC,EAAAA,EAAAA,QAAO,GACrBC,GAAaD,EAAAA,EAAAA,QAAsB,KAEnC,cAAEE,EAAa,qBAAEC,GDfSC,EAChCX,EACAY,KAEA,MAAM,EAACH,EAAc,EAACI,IAAoBC,EAAAA,EAAAA,UAAS,GAE7CJ,GAAuBK,EAAAA,EAAAA,cAC1BC,IACMhB,IACLA,EAASiB,SAASD,GACdJ,GAAeA,EAAcZ,GAAS,GAE5C,CAACA,EAAUY,IAGPM,GAAWH,EAAAA,EAAAA,cAAaf,IAC5Ba,EAAiBb,EAASmB,qBAAqB,GAC9C,IAUH,OARAC,EAAAA,EAAAA,YAAU,KACHpB,IAELkB,EAASlB,GAETA,EAASqB,GAAG,SAAUH,GAAUG,GAAG,SAAUH,GAAS,GACrD,CAAClB,EAAUkB,IAEP,CACLT,gBACAC,uBACD,ECf+CC,CAAmBX,GAE7DsB,GAAgBP,EAAAA,EAAAA,cAAaf,IACjCQ,EAAWe,QAAUvB,EAASwB,aAAajC,KAAKkC,GACvCA,EAAUC,cAAc,qBAC/B,GACD,IAEGC,GAAiBZ,EAAAA,EAAAA,cAAaf,IAClCM,EAAYiB,QA1BU,GA0BoBvB,EAAS4B,iBAAiBC,MAAM,GACzE,IAEGC,GAAaf,EAAAA,EAAAA,cACjB,CAACf,EAA6B+B,KAC5B,MAAMC,EAAShC,EAASiC,iBAClBC,EAAiBlC,EAASkC,iBAC1BC,EAAenC,EAASmC,eACxBC,EAA8B,WAAdL,EAEtB/B,EAAS4B,iBAAiBS,SAAQ,CAACC,EAAYC,KAC7C,IAAIC,EAAeF,EAAaJ,EACXF,EAAOS,cAAcF,GAE7BF,SAASK,IACpB,GAAIN,IAAkBD,EAAaQ,SAASD,GAAa,OAErDV,EAAOY,QAAQzC,MACjB6B,EAAOa,YAAYC,WAAWT,SAASU,IACrC,MAAMC,EAASD,EAASC,SAExB,GAAIN,IAAeK,EAAS/B,OAAoB,IAAXgC,EAAc,CACjD,MAAMC,EAAOC,KAAKD,KAAKD,IAET,IAAVC,IACFT,EAAeF,GAAc,EAAIJ,IAEtB,IAATe,IACFT,EAAeF,GAAc,EAAIJ,GAErC,KAIJ,MAAMiB,EAAa,EAAID,KAAKE,IAAIZ,EAAelC,EAAYiB,SACrD8B,GA5DWC,EA4DeH,EA5DCI,EA4DW,EA5DEC,EA4DC,EA3DvDN,KAAKK,IAAIL,KAAKM,IAAIF,EAAQC,GAAMC,IADRC,IAACH,EAAgBC,EAAaC,EA6D5BhD,EAAWe,QAAQmB,GAC3BgB,MAAMC,UAAY,SAASN,IAAQ,GAC7C,GACF,GAEJ,IAkBF,OAfAjC,EAAAA,EAAAA,YAAU,KACHpB,IAELsB,EAActB,GACd2B,EAAe3B,GACf8B,EAAW9B,GAEXA,EACGqB,GAAG,SAAUC,GACbD,GAAG,SAAUM,GACbN,GAAG,SAAUS,GACbT,GAAG,SAAUS,GACbT,GAAG,aAAcS,GAAW,GAC9B,CAAC9B,EAAU8B,KAGZ/C,EAAAA,EAAAA,IAAA6E,EAAAA,SAAA,MACE7E,EAAAA,EAAAA,IAAA,OAAKR,UAAU,+DACZuB,EACGA,EAASP,KAAI,CAACjB,EAASuF,KACrB9E,EAAAA,EAAAA,IAACW,EAAqB,CACpBD,IAAK,OAAOnB,EAAQwF,KACpBxF,QAASA,EACTyF,QAASA,IAAMrD,EAAqBmD,GACpCtF,UAAW,IACTsF,IAAMpD,EACF,GACA,6CAIV,OAEN1B,EAAAA,EAAAA,IAAA,OACEiF,IAAKjE,EACLxB,UAAU,+CAEVQ,EAAAA,EAAAA,IAAA,OACE2E,MAAO,CAAEO,mBAAoB,UAC7B1F,UAAU,kEAETuB,EACGA,EAASP,KAAI,CAACjB,EAASuF,KACrB9E,EAAAA,EAAAA,IAAA,OACEU,IAAKnB,EAAQwF,GACbC,QAASA,IAAMrD,EAAqBmD,GACpCtF,UAAU,oEAEVQ,EAAAA,EAAAA,IAACmF,EAAc,CACb5F,QAASA,EACTC,UAAW,gBACTsF,IAAMpD,EAAgB,GAAK,yBAKnC,OAGP,ECrFP,MArCiBpC,IAGmD,IAAA8F,EAAA,IAHlD,KAChBC,EACAC,aAAa,WAAEC,EAAU,KAAEC,IACkClG,EAC7D,MAAMyB,EAAiC,QAAzBqE,EAAGC,EAAKI,yBAAiB,IAAAL,OAAA,EAAtBA,EAAwBM,MACnCC,GAAcC,EAAAA,EAAAA,GAASL,EAAW1F,OAExC,OACEG,EAAAA,EAAAA,IAAA6E,EAAAA,SAAA,MACE7E,EAAAA,EAAAA,IAAC6F,EAAAA,EAAM,CACLC,YAAY,UACZnG,MAAO4F,EAAWQ,YAClBlG,MAAO8F,KAET3F,EAAAA,EAAAA,IAAA,OAAKR,UAAU,gBACbQ,EAAAA,EAAAA,IAACgG,EAAAA,EAAgB,CACfC,cAAc,iBACdzG,UAAU,6GAETuB,GAAWf,EAAAA,EAAAA,IAACkG,EAAgB,CAACnF,SAAUA,IAAe,KACtDA,EACGA,EAASP,KAAI,CAACjB,EAASuF,KACrB9E,EAAAA,EAAAA,IAACmF,EAAc,CACbzE,IAAKnB,EAAQwF,GACbxF,QAASA,EACTC,UAAW,4BAGf,QAGRQ,EAAAA,EAAAA,IAACmG,IAAM,CAAC3G,UAAU,YAClBQ,EAAAA,EAAAA,IAACoG,EAAAA,EAAkB,CAACZ,KAAMA,IACzB,EAMA,MAAMa,EAGTC,IAAA,IACFhB,aAAa,WAAEC,EAAU,KAAEgB,EAAI,KAAEf,GAAM,SACvCgB,GAC6DF,EAAA,OAC7DtG,EAAAA,EAAAA,IAAA6E,EAAAA,SAAA,MACE7E,EAAAA,EAAAA,IAACyG,EAAAA,GAAO,CACN9G,MAAO,GAAG4F,EAAWmB,UAAUnB,EAAWQ,YAAYY,gBACtDC,YAAaL,EAAKK,YAClBC,QAASN,EAAKM,QACdC,KAAMN,EAASO,SACfvB,KAAMA,IAEP,C","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}: {\n service: IServicePreview;\n className?: 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 <img\n src={imageURL}\n alt={`${title} logo`}\n className=\"invert h-10 w-10\"\n />\n <h2 className=\"font-bold text-2xl\" itemProp=\"serviceType\">\n {title}\n </h2>\n </div>\n <div\n className={`text-base 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\"\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}\n\nexport const ServiceCarouselButton = ({\n service,\n className,\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=\"py-1.5\">\n <img src={imageURL} alt={`${title} logo`} className=\"invert h-7 w-7\" />\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.4] hover:brightness-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.4]\"\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 const bannerImage = getImage(markupData.image);\n\n return (\n <>\n <Banner\n heightClass=\"lg:h-99\"\n title={markupData.bannerTitle}\n image={bannerImage}\n />\n <div className=\"bg-main-100\">\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 />\n ))\n : null}\n </ContentContainer>\n </div>\n <Border className=\"w-full\" />\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","html","frontmatter","title","keywords","image","publicURL","imageURL","___EmotionJSX","itemScope","itemType","src","alt","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","style","transform","React","i","id","onClick","ref","backfaceVisibility","ServicePreview","_data$allMarkdownRema","data","pageContext","markupData","lang","allMarkdownRemark","nodes","bannerImage","getImage","Banner","heightClass","bannerTitle","ContentContainer","maxWidthClass","ServicesCarousel","Border","ContactFormSection","Head","_ref2","site","location","HeadSeo","head","toUpperCase","description","siteUrl","path","pathname"],"sourceRoot":""}