https://www.delius-klasing.de/_next/static/chunks/TeaserMostViewedBikesTeaser.9534fdcc26ea4850.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[12052],{39728:(e,i,t)=>{t.r(i),t.d(i,{MostViewedBikesTeaser:()=>g});var s=t(6029),n=t(55729),r=t(93462),a=t(99998),l=t(42691),c=t(43340),o=t(5700),d=t(91694),u=t(21202),v=t(60451),p=t(19123),w=t(67756),m=t(98681),x=t(33364),b=t(92818);r.A.use([a.A]);let g=({entries:e={items:[]},showSliderPagination:i=!0,...t})=>{let r=(0,n.useRef)(),a=(0,n.useRef)(),g=(0,n.useRef)(),h=(0,n.useRef)(),[f,k]=(0,n.useState)(!1),j=(0,o.c)("common"),E=(0,d.Ym)(),N=`/${(0,u.getLocalePath)(E,"brands")}/`,y=e?.items||[],R=`<div class="swiper-pagination-bullet pb-3 w-2">
2        <div class="h-2 bg-slate-500 opacity-50 flex-1 rounded-full"></div>
3    </div>`;(0,n.useEffect)(()=>{if(f||!h.current)return;let e=new IntersectionObserver(i=>{i[0].isIntersecting&&!f&&((0,w.trackPiwikEvent)("MostViewedBikesTeaser","visible","view"),(0,m.Sc)("view",{type:"mostviewed",name:"visible",action:"view"}),k(!0),e.disconnect())},{threshold:.1});return e.observe(h.current),()=>e.disconnect()},[f]);let _=e=>{switch((0,w.trackPiwikEvent)("MostViewedBikesTeaser","slider",e),(0,m.Sc)("click",{type:"mostviewed",name:"slider",action:e}),e){case"prev":r?.current?.swiper?.slideNext();break;case"next":r?.current?.swiper?.slidePrev()}};return(0,s.jsxs)("div",{ref:h,className:"gt-wrap relative mx-auto mb-16 max-w-screen-xl px-4 pb-4",children:[(0,s.jsx)(v.M,{link:N,moreLinkText:j("BRAND_MORE_BIKES"),...t}),(0,s.jsx)(l.R,{slidesPerView:1.5,breakpoints:{1024:{slidesPerView:4.5}},pagination:{el:i?"#most-viewed-bikes-teaser":"",clickable:!0,type:"bullets",bulletActiveClass:"swiper-pagination-bullet-active-not-white",renderBullet:function(){return R}},allowTouchMove:!0,autoHeight:!1,spaceBetween:16,className:"mb-4",navigation:{nextEl:a?.current,prevEl:g?.current},ref:r,onAfterInit:e=>{e.params.navigation.prevEl=g.current,e.params.navigation.nextEl=a.current},children:y.map(e=>(0,s.jsx)(c.q,{className:"!h-auto",children:(0,s.jsx)(p.BidexTeaserItem,{item:e,mostViewed:!0})},e._id))}),i&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{className:"lg:hidden",children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:".swiper-pagination-bullet-active-not-white div {background-color: rgb(var(--color-secondary))!important}"}}),(0,s.jsx)("div",{id:"most-viewed-bikes-teaser",className:"swiper-pagination flex grid-cols-3 items-center justify-center gap-4"})]}),(0,s.jsxs)("div",{className:"hidden lg:block",children:[(0,s.jsx)(b.S,{navigationType:"prev",ref:g,swiperRef:r?.current?.swiper,navigationInsideContainer:!0,onClick:()=>_("prev")}),(0,s.jsx)(b.S,{navigationType:"next",ref:a,swiperRef:r?.current?.swiper,navigationInsideContainer:!0,onClick:()=>_("next")})]})]}),(0,s.jsx)("div",{className:"flex items-center justify-center md:hidden",children:(0,s.jsx)(x.$,{buttonOutline:!0,buttonLabel:j("BRAND_MORE_BIKES"),iconName:"arrow",fullWidth:!1,link:N})})]})}}}]);