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

"use strict";(self.webpackChunkcode_cave=self.webpackChunkcode_cave||[]).push([[417],{8686:function(e,s,t){t.r(s),t.d(s,{Head:function(){return h},default:function(){return g}});var l=t(7294),a=t(1929),n=t(1164),r=t(9165),i=t(5081),c=t(1312),o=t(917);var m=e=>{let{service:s,className:t,imgClassName:l}=e;const{html:a,frontmatter:{title:n,keywords:r,image:{publicURL:i}}}=s;return(0,o.tZ)("div",{className:`service-preview origin-[5%_50%] break-inside-avoid flex flex-col gap-5 sm:px-8 py-8 text-secondary-100 cursor-pointer ${t}`,itemScope:!0,itemType:"https://schema.org/Service"},(0,o.tZ)("div",{className:"flex items-center gap-5"},(0,o.tZ)("div",{className:`masked-icon h-10 w-10 ${null!=l?l:""}`,style:{maskImage:`url(${i})`,WebkitMaskImage:`url(${i})`}}),(0,o.tZ)("h2",{className:"font-bold text-2xl",itemProp:"serviceType"},n)),(0,o.tZ)("div",{className:"text-lg text-secondary-70",dangerouslySetInnerHTML:{__html:a},itemProp:"description"}),r?(0,o.tZ)("div",{className:"flex gap-2 flex-wrap w-full"},r.map((e=>(0,o.tZ)("p",{key:e,className:"h-8 flex items-center whitespace-nowrap px-4 bg-main-70 text-secondary-70 rounded-lg border-primary-70 border border-solid"},e)))):null)},d=t(7462);const p=e=>{let{service:s,className:t,imgClassName:l,...a}=e;const{frontmatter:{title:n,image:{publicURL:r}}}=s;return(0,o.tZ)("button",(0,d.Z)({"aria-label":"view service",className:`flex gap-5 min-h-10 items-center ${t}`,type:"button"},a),(0,o.tZ)("div",{className:`masked-icon py-1.5 h-7 w-7 ${null!=l?l:""}`,style:{maskImage:`url(${r})`,WebkitMaskImage:`url(${r})`}}),(0,o.tZ)("h2",{className:"hidden lg:block font-semibold text-lg text-secondary-100 text-start"},n))};var u=e=>{let{services:s}=e;const[t,a]=(0,c.Z)({axis:"y",loop:!0,skipSnaps:!0,align:"center"}),n=(0,l.useRef)(0),r=(0,l.useRef)([]),{selectedIndex:i,onServiceButtonClick:d}=((e,s)=>{const{0:t,1:a}=(0,l.useState)(0),n=(0,l.useCallback)((t=>{e&&(e.scrollTo(t),s&&s(e))}),[e,s]),r=(0,l.useCallback)((e=>{a(e.selectedScrollSnap())}),[]);return(0,l.useEffect)((()=>{e&&(r(e),e.on("reInit",r).on("select",r))}),[e,r]),{selectedIndex:t,onServiceButtonClick:n}})(a),u=(0,l.useCallback)((e=>{r.current=e.slideNodes().map((e=>e.querySelector(".service-preview")))}),[]),g=(0,l.useCallback)((e=>{n.current=.2*e.scrollSnapList().length}),[]),h=(0,l.useCallback)(((e,s)=>{const t=e.internalEngine(),l=e.scrollProgress(),a=e.slidesInView(),i="scroll"===s;e.scrollSnapList().forEach(((e,s)=>{let c=e-l;t.slideRegistry[s].forEach((s=>{if(i&&!a.includes(s))return;t.options.loop&&t.slideLooper.loopPoints.forEach((t=>{const a=t.target();if(s===t.index&&0!==a){const s=Math.sign(a);-1===s&&(c=e-(1+l)),1===s&&(c=e+(1-l))}}));const o=1-Math.abs(c*n.current),m=(d=o,p=0,u=1,Math.min(Math.max(d,p),u));var d,p,u;r.current[s].style.transform=`scale(${m})`}))}))}),[]);return(0,l.useEffect)((()=>{a&&(u(a),g(a),h(a),a.on("reInit",u).on("reInit",g).on("reInit",h).on("scroll",h).on("slideFocus",h))}),[a,h]),(0,o.tZ)(l.Fragment,null,(0,o.tZ)("div",{className:"hidden sm:flex flex-col gap-5 p-8 lg:basis-[410px] shrink-0"},s?s.map(((e,s)=>(0,o.tZ)(p,{key:`dot-${e.id}`,service:e,onClick:()=>d(s),className:""+(s===i?"":"brightness-[0.7] hover:brightness-100"),imgClassName:""+(s===i?"bg-primary-70":"bg-secondary-100")}))):null),(0,o.tZ)("div",{ref:t,className:"hidden sm:block overflow-hidden basis-full"},(0,o.tZ)("div",{style:{backfaceVisibility:"hidden"},className:"flex flex-col touch-pan-x h-[1000px] sm:h-[900px] md:h-[750px]"},s?s.map(((e,s)=>(0,o.tZ)("div",{key:e.id,onClick:()=>d(s),className:"grow-0 shrink-0 basis-1/3 min-h-0 select-none flex items-center"},(0,o.tZ)(m,{service:e,className:"select-none "+(s===i?"":"brightness-[0.7]"),imgClassName:"select-none "+(s===i?"bg-primary-70":"bg-secondary-100")})))):null)))};var g=e=>{var s;let{data:t,pageContext:{markupData:r,lang:c}}=e;const d=null===(s=t.allMarkdownRemark)||void 0===s?void 0:s.nodes;return(0,o.tZ)(l.Fragment,null,(0,o.tZ)(a.Z,{heightClass:"lg:h-32",titleBlockClassName:"w-full",title:r.bannerTitle}),(0,o.tZ)("div",null,(0,o.tZ)(n.Z,{maxWidthClass:"max-w-[1280px]",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]"},d?(0,o.tZ)(u,{services:d}):null,d?d.map(((e,s)=>(0,o.tZ)(m,{key:e.id,service:e,className:"sm:hidden select-none",imgClassName:"bg-secondary-100"}))):null)),(0,o.tZ)(i.Z,{lang:c}))};const h=e=>{let{pageContext:{markupData:s,site:t,lang:a},location:n}=e;return(0,o.tZ)(l.Fragment,null,(0,o.tZ)(r.Ag,{title:`${s.head} | ${s.bannerTitle.toUpperCase()}`,description:t.description,siteUrl:t.siteUrl,path:n.pathname,lang:a}))}}}]);
//# sourceMappingURL=component---src-pages-templates-services-tsx-8562767032e376b86b28.js.map