@anker-in/headless-ui 1.1.9-alpha.1764588298949 → 1.1.9-alpha.1764590742027
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/esm/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var xe=Object.create;var M=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,he=Object.prototype.hasOwnProperty;var ge=(l,n)=>{for(var h in n)M(l,h,{get:n[h],enumerable:!0})},Y=(l,n,h,_)=>{if(n&&typeof n=="object"||typeof n=="function")for(let g of fe(n))!he.call(l,g)&&g!==h&&M(l,g,{get:()=>n[g],enumerable:!(_=ue(n,g))||_.enumerable});return l};var _e=(l,n,h)=>(h=l!=null?xe(ve(l)):{},Y(n||!l||!l.__esModule?M(h,"default",{value:l,enumerable:!0}):h,l)),be=l=>Y(M({},"__esModule",{value:!0}),l);var Ne={};ge(Ne,{default:()=>ke});module.exports=be(Ne);var e=require("react/jsx-runtime"),i=_e(require("react")),r=require("../../components/index.js"),m=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),y=require("framer-motion"),w=require("./types.js");const we="image",ye="image_with_text",Z=i.default.forwardRef(({data:l,className:n},h)=>{const{title:_,subtitle:g,desc:I,descIcon:z,image:k,padImage:H,mobileImage:j,theme:ae="dark",items:W=[],layout:oe="left",mediaType:le="image",datalist:d=[],video:R,padVideo:A,mobVideo:q,cols:V=w.Cols.One,button:N,textAlign:s="left"}=l,x=oe,E=(0,i.useRef)(null),P=(0,i.useRef)(null),S=(0,i.useRef)(null),D=(0,i.useRef)(null),$=(0,i.useRef)(null),[u,se]=(0,i.useState)(0),B=(0,i.useRef)([]),[C,re]=(0,i.useState)({left:0,width:0}),[b,F]=(0,i.useState)(""),[O,G]=(0,i.useState)(""),[J,K]=(0,i.useState)(""),c=d.length>0,T=le==="video";(0,te.useExposure)(E,{componentType:we,componentName:ye,componentTitle:_,componentDescription:g}),(0,i.useImperativeHandle)(h,()=>E.current),(0,i.useEffect)(()=>{if(d.length>0){const t=B.current[u];if(t){const{offsetLeft:o,offsetWidth:a}=t;re({left:o,width:a})}}},[u,d.length]);const[Q,me]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)($,{once:!0,threshold:.01,callback:()=>{me(!0)}}),(0,i.useEffect)(()=>{if(!Q||!T)return;let t="",o="",a="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",o=f.padVideo?.url||t,a=f.mobVideo?.url||t}else t=R?.url||"",o=A?.url||t,a=q?.url||t;t&&F(t),o&&G(o),a&&K(a),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},200)},[Q,T,c,u,d,R?.url,A?.url,q?.url]);const de=(t,o)=>{if(se(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&c&&d[t]){const a=d[t];a.video?.url&&F(a.video.url),a.padVideo?.url&&G(a.padVideo.url),a.mobVideo?.url&&K(a.mobVideo.url),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},300)}},ne=()=>!L||!N?.text?null:(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":s==="center","flex justify-start":s==="left"}),children:(0,e.jsx)(r.Button,{as:"a",href:N.link,variant:N.variant||"secondary",size:"base",className:"image-with-text__button",children:N.text})}),p=W.length>0,L=!!N,U=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return k?`${k?.url},${H?.url||k?.url} 1024, ${j?.url||k?.url} 768`:""},X=()=>{if(c){const f=d[u],v=f.image?.url,ce=f.imgPad?.url||v,pe=f.imageMob?.url||v;return(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:v,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=k?.url,o=H?.url||t,a=j?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:E,"data-ui-component-id":"ImageWithText",className:(0,m.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(x==="top"||x==="bottom"),"items-center":x==="left"||x==="right","flex-col laptop:flex-row":!c&&(x==="left"||x==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":ae==="dark"},n),children:[c&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":s==="left","text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:_,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:I,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":s==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:C.left,width:C.width}}),d.map((t,o)=>(0,e.jsx)("div",{ref:a=>{B.current[o]=a},onClick:a=>de(o,a),className:(0,m.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===o?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!c&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":p,"items-start":s==="left","items-center":s==="center","text-left":s==="left","text-center":s==="center","laptop:order-1":x==="left"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__main-content",{"flex flex-col":L}),children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:_,className:(0,m.cn)("image-with-text__title",{"w-full":p,"text-left":p&&s==="left","text-center":p&&s==="center"})}),g&&(0,e.jsx)(r.Text,{as:"p",size:p?4:3,html:g,className:(0,m.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!p,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":p,"text-left":p&&s==="left","text-center":p&&s==="center"})}),!p&&(I||z)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[z&&(0,e.jsx)("img",{src:z,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),I&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:I,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),p&&(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":x==="top"||x==="bottom","grid-cols-1":V===w.Cols.One,"grid-cols-2":V===w.Cols.Two,"grid-cols-3":V===w.Cols.Three,"grid-cols-4":V===w.Cols.Four}),children:W.map((t,o)=>(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item",{"text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":s==="center","justify-start":s==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),ne()]}),(0,e.jsx)("div",{ref:$,className:(0,m.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":x==="left"||x==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":p,"laptop:basis-[63%] desktop:basis-[57%]":p&&x==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c}),children:c?T?X():(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:U(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?X():(0,e.jsx)(r.Picture,{source:U(),className:(0,m.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Z.displayName="ImageWithText";var ke=(0,ee.withLayout)(Z);
|
|
1
|
+
"use strict";"use client";var xe=Object.create;var D=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var ge=(r,c)=>{for(var v in c)D(r,v,{get:c[v],enumerable:!0})},X=(r,c,v,w)=>{if(c&&typeof c=="object"||typeof c=="function")for(let g of fe(c))!ve.call(r,g)&&g!==v&&D(r,g,{get:()=>c[g],enumerable:!(w=ue(c,g))||w.enumerable});return r};var be=(r,c,v)=>(v=r!=null?xe(he(r)):{},X(c||!r||!r.__esModule?D(v,"default",{value:r,enumerable:!0}):v,r)),we=r=>X(D({},"__esModule",{value:!0}),r);var Te={};ge(Te,{default:()=>Ne});module.exports=we(Te);var e=require("react/jsx-runtime"),i=be(require("react")),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),k=require("framer-motion"),y=require("./types.js");const _e="image",ye="image_with_text",ke=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=i.default.forwardRef(({data:r,className:c},v)=>{const{title:w,subtitle:g,desc:I,descIcon:z,image:N,padImage:H,mobileImage:j,theme:ae="dark",items:R=[],layout:oe="left",mediaType:le="image",datalist:d=[],video:W,padVideo:C,mobVideo:A,cols:L=y.Cols.One,button:b,textAlign:n="left"}=r,a=oe,E=(0,i.useRef)(null),V=(0,i.useRef)(null),P=(0,i.useRef)(null),S=(0,i.useRef)(null),q=(0,i.useRef)(null),[u,se]=(0,i.useState)(0),B=(0,i.useRef)([]),[$,re]=(0,i.useState)({left:0,width:0}),[_,F]=(0,i.useState)(""),[O,Z]=(0,i.useState)(""),[G,J]=(0,i.useState)(""),p=d.length>0,T=le==="video";(0,te.useExposure)(E,{componentType:_e,componentName:ye,componentTitle:w,componentDescription:g}),(0,i.useImperativeHandle)(v,()=>E.current),(0,i.useEffect)(()=>{if(d.length>0){const t=B.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;re({left:s,width:o})}}},[u,d.length]);const[K,ne]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)(q,{once:!0,threshold:.01,callback:()=>{ne(!0)}}),(0,i.useEffect)(()=>{if(!K||!T)return;let t="",s="",o="";if(p&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=W?.url||"",s=C?.url||t,o=A?.url||t;t&&F(t),s&&Z(s),o&&J(o),setTimeout(()=>{[V.current?.querySelector("video"),P.current?.querySelector("video"),S.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[K,T,p,u,d,W?.url,C?.url,A?.url]);const me=(t,s)=>{if(se(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&p&&d[t]){const o=d[t];o.video?.url&&F(o.video.url),o.padVideo?.url&&Z(o.padVideo.url),o.mobVideo?.url&&J(o.mobVideo.url),setTimeout(()=>{[V.current?.querySelector("video"),P.current?.querySelector("video"),S.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},de=()=>!M||!b?.text?null:(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":n==="center","flex justify-start":n==="left","laptop:hidden":a==="top"||a==="bottom"}),children:(0,e.jsx)(l.Button,{as:"a",href:b.link,variant:b.variant||"secondary",size:"base",className:"image-with-text__button",children:b.text})}),x=R.length>0,M=!!b,Q=()=>{if(p&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return N?`${N?.url},${H?.url||N?.url} 1024, ${j?.url||N?.url} 768`:""},U=()=>{if(p){const f=d[u],h=f.image?.url,ce=f.imgPad?.url||h,pe=f.imageMob?.url||h;return(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:V,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:O||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:G||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=N?.url,s=H?.url||t,o=j?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:V,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:O||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:G||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:E,"data-ui-component-id":"ImageWithText",className:(0,m.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&(a==="top"||a==="bottom"),"items-center":a==="left"||a==="right","flex-col laptop:flex-row":!p&&(a==="left"||a==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"aiui-dark":ae==="dark"},c),children:[p&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":n==="left","text-center":n==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(l.Heading,{as:"h3",size:4,html:w,className:"image-with-text__title"}),(0,e.jsx)(l.Text,{as:"p",size:1,html:I,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":n==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:o=>{B.current[s]=o},onClick:o=>me(s,o),className:(0,m.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(l.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!p&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__content flex flex-col",{"justify-center":!M,"justify-between":M,"w-full laptop:w-fit":x,"items-start":n==="left","items-center":n==="center","text-left":n==="left","text-center":n==="center","laptop:order-1":a==="left"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__main-content",{"flex flex-col":M}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__header",{"items-end justify-between gap-16 hidden laptop:flex":(a==="top"||a==="bottom")&&b?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex flex-col",children:[(0,e.jsx)(l.Heading,{as:"h2",size:4,html:w,className:(0,m.cn)("image-with-text__title",{"w-full":x,"text-left":x&&n==="left","text-center":x&&n==="center"})}),g&&(0,e.jsx)(l.Text,{as:"p",size:x?4:3,html:g,className:(0,m.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&n==="left","text-center":x&&n==="center"})})]}),(a==="top"||a==="bottom")&&b?.text&&(0,e.jsx)(l.Link,{href:b.link,className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:ke,children:b.text})]}),!x&&(I||z)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[z&&(0,e.jsx)("img",{src:z,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),I&&(0,e.jsx)(l.Heading,{as:"h4",size:5,html:I,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":a==="top"||a==="bottom","grid-cols-1":L===y.Cols.One,"grid-cols-2":L===y.Cols.Two,"grid-cols-3":L===y.Cols.Three,"grid-cols-4":L===y.Cols.Four}),children:R.map((t,s)=>(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item",{"text-center":n==="center"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":n==="center","justify-start":n==="left"}),children:[(0,e.jsx)(l.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(l.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(l.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),de()]}),(0,e.jsx)("div",{ref:q,className:(0,m.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":a==="left"||a==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&a==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":p,"!max-w-none !max-h-none aspect-auto":a==="top"||a==="bottom"}),children:p?T?U():(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(l.Picture,{source:Q(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?U():(0,e.jsx)(l.Picture,{source:Q(),className:(0,m.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Ne=(0,ee.withLayout)(Y);
|
|
2
2
|
//# sourceMappingURL=ImageWithText.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n layout = 'left',\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n cols = Cols.One,\n button,\n textAlign = 'left',\n } = data\n\n const effectiveLayout = layout\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n const [videoIntersected, setVideoIntersected] = useState(false)\n\n // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n useIntersectionObserverDelay(mediaWrapperRef, {\n once: true,\n threshold: 0.01,\n callback: () => {\n setVideoIntersected(true)\n },\n })\n\n // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n useEffect(() => {\n if (!videoIntersected || !isVideo) return\n\n // \u786E\u5B9A\u89C6\u9891\u6E90\n let desktopSrc = ''\n let tabletSrc = ''\n let mobileSrc = ''\n\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n desktopSrc = activeTab.video?.url || ''\n tabletSrc = activeTab.padVideo?.url || desktopSrc\n mobileSrc = activeTab.mobVideo?.url || desktopSrc\n } else {\n desktopSrc = video?.url || ''\n tabletSrc = padVideo?.url || desktopSrc\n mobileSrc = mobVideo?.url || desktopSrc\n }\n\n // \u8BBE\u7F6E\u89C6\u9891\u6E90\n if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(videoElement => {\n if (videoElement) {\n videoElement.load()\n videoElement.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 200)\n }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n\n // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n if (isVideo && isTabMode && datalist[index]) {\n const activeTab = datalist[index]\n\n // \u66F4\u65B0\u89C6\u9891\u6E90\n if (activeTab.video?.url) {\n setLoadedDesktopVideoSrc(activeTab.video.url)\n }\n if (activeTab.padVideo?.url) {\n setLoadedTabletVideoSrc(activeTab.padVideo.url)\n }\n if (activeTab.mobVideo?.url) {\n setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n }\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(video => {\n if (video) {\n video.load()\n video.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n }\n }\n\n // \u6E32\u67D3\u6309\u94AE\n const renderButton = () => {\n if (!hasButton || !button?.text) return null\n\n return (\n <div\n className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n 'flex justify-center': textAlign === 'center',\n 'flex justify-start': textAlign === 'left',\n })}\n >\n <Button\n as=\"a\"\n href={button.link}\n variant={button.variant || 'secondary'}\n size=\"base\"\n className=\"image-with-text__button\"\n >\n {button.text}\n </Button>\n </div>\n )\n }\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n const hasButton = Boolean(button)\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n }\n if (image) {\n return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = activeTab.image?.url\n const tabletPoster = activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = image?.url\n const tabletPoster = padImage?.url || desktopPoster\n const mobilePoster = mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text text-info-primary',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div\n className={cn(\n 'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n {\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n />\n </div>\n\n <div\n className={cn(\n 'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n {\n 'flex justify-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col', {\n // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n 'justify-center': !hasButton,\n 'justify-between': hasButton,\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full laptop:w-fit': hasItems,\n // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n 'items-start': textAlign === 'left',\n 'items-center': textAlign === 'center',\n // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n // order\u63A7\u5236\n 'laptop:order-1': effectiveLayout === 'left',\n })}\n >\n {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n }\n )}\n />\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div\n className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n 'grid-cols-1': cols === Cols.One,\n 'grid-cols-2': cols === Cols.Two,\n 'grid-cols-3': cols === Cols.Three,\n 'grid-cols-4': cols === Cols.Four,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div\n key={index}\n className={cn('image-with-text__item', {\n 'text-center': textAlign === 'center',\n })}\n >\n <div\n className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n 'justify-center': textAlign === 'center',\n 'justify-start': textAlign === 'left',\n })}\n >\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n imgClassName=\"h-full !w-full\"\n />\n <Heading\n size={4}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n {renderButton()}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n ref={mediaWrapperRef}\n className={cn('image-with-text__media-wrapper', {\n 'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image?.alt}\n className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
-
"mappings": "olBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,
|
|
6
|
-
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "import_types", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "cols", "button", "textAlign", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button, Link } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n fill=\"currentColor\"\n />\n </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n layout = 'left',\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n cols = Cols.One,\n button,\n textAlign = 'left',\n } = data\n\n const effectiveLayout = layout\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n const [videoIntersected, setVideoIntersected] = useState(false)\n\n // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n useIntersectionObserverDelay(mediaWrapperRef, {\n once: true,\n threshold: 0.01,\n callback: () => {\n setVideoIntersected(true)\n },\n })\n\n // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n useEffect(() => {\n if (!videoIntersected || !isVideo) return\n\n // \u786E\u5B9A\u89C6\u9891\u6E90\n let desktopSrc = ''\n let tabletSrc = ''\n let mobileSrc = ''\n\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n desktopSrc = activeTab.video?.url || ''\n tabletSrc = activeTab.padVideo?.url || desktopSrc\n mobileSrc = activeTab.mobVideo?.url || desktopSrc\n } else {\n desktopSrc = video?.url || ''\n tabletSrc = padVideo?.url || desktopSrc\n mobileSrc = mobVideo?.url || desktopSrc\n }\n\n // \u8BBE\u7F6E\u89C6\u9891\u6E90\n if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(videoElement => {\n if (videoElement) {\n videoElement.load()\n videoElement.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 200)\n }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n\n // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n if (isVideo && isTabMode && datalist[index]) {\n const activeTab = datalist[index]\n\n // \u66F4\u65B0\u89C6\u9891\u6E90\n if (activeTab.video?.url) {\n setLoadedDesktopVideoSrc(activeTab.video.url)\n }\n if (activeTab.padVideo?.url) {\n setLoadedTabletVideoSrc(activeTab.padVideo.url)\n }\n if (activeTab.mobVideo?.url) {\n setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n }\n\n // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n setTimeout(() => {\n const videos = [\n desktopVideoRef.current?.querySelector('video'),\n tabletVideoRef.current?.querySelector('video'),\n mobileVideoRef.current?.querySelector('video'),\n ]\n\n videos.forEach(video => {\n if (video) {\n video.load()\n video.play().catch(() => {\n // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n })\n }\n })\n }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n }\n }\n\n // \u6E32\u67D3\u6309\u94AE\n const renderButton = () => {\n if (!hasButton || !button?.text) return null\n return (\n <div\n className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n 'flex justify-center': textAlign === 'center',\n 'flex justify-start': textAlign === 'left',\n 'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n })}\n >\n <Button\n as=\"a\"\n href={button.link}\n variant={button.variant || 'secondary'}\n size=\"base\"\n className=\"image-with-text__button\"\n >\n {button.text}\n </Button>\n </div>\n )\n }\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n const hasButton = Boolean(button)\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n }\n if (image) {\n return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = activeTab.image?.url\n const tabletPoster = activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n const desktopPoster = image?.url\n const tabletPoster = padImage?.url || desktopPoster\n const mobilePoster = mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text text-info-primary',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div\n className={cn(\n 'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n {\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n />\n </div>\n\n <div\n className={cn(\n 'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n {\n 'flex justify-center': textAlign === 'center',\n }\n )}\n >\n <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col', {\n // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n 'justify-center': !hasButton,\n 'justify-between': hasButton,\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full laptop:w-fit': hasItems,\n // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n 'items-start': textAlign === 'left',\n 'items-center': textAlign === 'center',\n // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n 'text-left': textAlign === 'left',\n 'text-center': textAlign === 'center',\n // order\u63A7\u5236\n 'laptop:order-1': effectiveLayout === 'left',\n })}\n >\n {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n <div\n className={cn('image-with-text__header', {\n 'items-end justify-between gap-16 hidden laptop:flex':\n (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n })}\n >\n <div className=\"image-with-text__title-wrapper flex flex-col\">\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n 'text-left': hasItems && textAlign === 'left',\n 'text-center': hasItems && textAlign === 'center',\n }\n )}\n />\n )}\n </div>\n {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n <Link\n href={button.link}\n className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n suffixIcon={ArrowRight}\n >\n {button.text}\n </Link>\n )}\n </div>\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div\n className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n 'grid-cols-1': cols === Cols.One,\n 'grid-cols-2': cols === Cols.Two,\n 'grid-cols-3': cols === Cols.Three,\n 'grid-cols-4': cols === Cols.Four,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div\n key={index}\n className={cn('image-with-text__item', {\n 'text-center': textAlign === 'center',\n })}\n >\n <div\n className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n 'justify-center': textAlign === 'center',\n 'justify-start': textAlign === 'left',\n })}\n >\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n imgClassName=\"h-full !w-full\"\n />\n <Heading\n size={4}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n {renderButton()}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n ref={mediaWrapperRef}\n className={cn('image-with-text__media-wrapper', {\n 'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image?.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image?.alt}\n className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "import_types", "componentType", "componentName", "ArrowRight", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "cols", "button", "textAlign", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var I=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,i)=>{for(var c in i)I(t,c,{get:i[c],enumerable:!0})},B=(t,i,c,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of F(i))!H.call(t,s)&&s!==c&&I(t,s,{get:()=>i[s],enumerable:!(m=R(i,s))||m.enumerable});return t};var _=t=>B(I({},"__esModule",{value:!0}),t);var Q={};V(Q,{default:()=>O});module.exports=_(Q);var e=require("react/jsx-runtime"),o=require("react"),D=require("react-responsive"),p=require("../../helpers/utils.js"),A=require("../../shared/Styles.js"),a=require("../../components/index.js"),X=require("../SwiperBox/index.js"),f=require("../../hooks/useExposure.js"),w=require("swiper/react"),T=require("swiper/modules"),Z=require("swiper/css");const U="media",S="media_scene_switcher",v=3e3,q=({data:t,configuration:i,theme:c})=>{const m=(0,o.useRef)(null),s=i?.isActive||!1;return(0,f.useExposure)(m,{componentType:U,componentName:S,componentTitle:t?.title,position:(i?.index??0)+1}),(0,e.jsxs)("div",{ref:m,className:(0,p.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":s,"bg-[#EAEAEC] text-[1D1D1F]":s&&c==="light"}),onClick:()=>i?.onItemClick?.(i?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,p.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":s}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:s?`progress-bar ${v}ms ease-out`:"none"}})]})},$=({data:t,configuration:i,theme:c})=>{const m=(0,o.useRef)(null),s=i?.isActive||!1,d=(0,D.useMediaQuery)({query:"(max-width: 768px)"});(0,f.useExposure)(m,{componentType:U,componentName:S,componentTitle:t?.title,position:(i?.index??0)+1});const x=d&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,r=d&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,u=r||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:m,className:(0,p.cn)("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden",{"aiui-dark":c==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:x?(0,e.jsx)("video",{src:x,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:u,className:"size-full object-cover"}):r?(0,e.jsx)(a.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:r,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,p.cn)("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":s,"bg-[#EAEAEC] text-[1D1D1F]":s&&c==="light"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",children:(0,e.jsx)(a.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,p.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":s}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:s?`progress-bar ${v}ms ease-out`:"none"}})]})},z=(0,o.forwardRef)(({className:t="",data:i,id:c,style:m},s)=>{const{title:d,subtitle:x,items:r=[],theme:u="light"}=i||{},[b,g]=(0,o.useState)(0),[C,P]=(0,o.useState)(0),N=(0,o.useRef)(null),h=(0,o.useRef)(0),E=(0,D.useMediaQuery)({query:"(max-width: 1023px)"});(0,o.useImperativeHandle)(s,()=>N.current),(0,f.useExposure)(N,{componentType:U,componentName:S,componentTitle:d}),(0,o.useEffect)(()=>{if(!(E||r.length===0))return h.current=window.setInterval(()=>{g(l=>(l+1)%r.length)},v),()=>{h.current&&window.clearInterval(h.current)}},[E,r.length]);const L=l=>{g(l),h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{g(n=>(n+1)%r.length)},v)},y=r[b],G=y?.videoUrl?.url,K=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
|
|
2
2
|
@keyframes progress-bar {
|
|
3
3
|
from {
|
|
4
4
|
transform: translate3d(-100%, -2px, 0);
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
transform: translate3d(0, -2px, 0);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
`}),(0,e.jsxs)("section",{id:c,ref:N,className:(0,
|
|
10
|
+
`}),(0,e.jsxs)("section",{id:c,ref:N,className:(0,p.cn)("media-scene-switcher text-info-primary w-full overflow-hidden",{"aiui-dark":u==="dark"},t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",children:r.map((l,n)=>{const M=l?.videoUrl?.url,k=l?.imageUrl?.url,j=k||l?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,p.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":n===b}),children:M?(0,e.jsx)("video",{src:M,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:j,className:"size-full object-cover"}):k?(0,e.jsx)(a.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:k,alt:l?.title||""}):null},l.id||n)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[d&&(0,e.jsx)(a.Heading,{as:"h3",html:d,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),x&&(0,e.jsx)(a.Text,{as:"span",size:4,html:x,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:r.map((l,n)=>(0,e.jsx)(q,{data:l,configuration:{index:n,isActive:n===b,onItemClick:L},theme:u},l.id||n))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[d&&(0,e.jsx)(a.Heading,{as:"h2",html:d,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight"}),x&&(0,e.jsx)(a.Text,{as:"span",size:4,html:x,className:"media-scene-switcher-subtitle text-[14px] text-white"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(w.Swiper,{onSlideChange:l=>P(l.realIndex),initialSlide:0,modules:[T.Autoplay],loop:r.length>1,autoplay:r.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:r.map((l,n)=>(0,e.jsx)(w.SwiperSlide,{className:"!h-auto !w-[296px]",children:(0,e.jsx)($,{data:l,configuration:{index:n,isActive:n===C},theme:u})},l.id||n))})})]})]})]})});z.displayName="MediaSceneSwitcher";var O=(0,A.withLayout)(z);
|
|
11
11
|
//# sourceMappingURL=MediaSceneSwitcher.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className=\"media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden\"\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div className=\"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white\">\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n ({ className = '', data, id, style }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, -2px, 0);\n }\n to {\n transform: translate3d(0, -2px, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDM,IAAAI,EAAA,6BAnDNC,EAA6E,iBAC7EC,EAA8B,4BAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAuC,qCACvCC,EAAsB,iCACtBC,EAA4B,sCAE5BN,EAAoC,wBACpCO,EAAyB,0BACzBC,EAAO,sBAGP,MAAMC,EAAgB,QAChBC,EAAgB,uBAChBC,EAAgB,IAYhBC,EAAc,CAAC,CAAE,KAAAC,EAAM,cAAAC,EAAe,MAAAC,CAAM,IAAiB,CACjE,MAAMC,KAAM,UAAuB,IAAI,EACjCC,EAAWH,GAAe,UAAY,GAE5C,wBAAYE,EAAK,CACf,cAAAP,EACA,cAAAC,EACA,eAAgBG,GAAM,MACtB,UAAWC,GAAe,OAAS,GAAK,CAC1C,CAAC,KAGC,QAAC,OACC,IAAKE,EACL,aAAW,MACT,yFACA,iBACA,CACE,0BAA2BC,EAC3B,6BAA8BA,GAAYF,IAAU,OACtD,CACF,EACA,QAAS,IAAMD,GAAe,cAAcA,GAAe,OAAS,CAAC,EAErE,qBAAC,OAAI,UAAU,uJACb,oBAAC,OAAI,UAAU,yCACb,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMD,GAAM,MAAO,EAC/C,KACA,OAAC,OAAI,UAAU,gFACb,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMA,GAAM,IAAK,EAC7C,GACF,KACA,OAAC,OACC,aAAW,MAAG,+CAAgD,CAC5D,uCAAwCI,CAC1C,CAAC,EACD,MAAO,CACL,UAAW,8BACX,WAAY,mDACZ,UAAWA,EAAW,gBAAgBN,CAAa,cAAgB,MACrE,EACF,GACF,CAEJ,EAEMO,EAAa,CAAC,CAAE,KAAAL,EAAM,cAAAC,EAAe,MAAAC,CAAM,IAAiB,CAChE,MAAMC,KAAM,UAAuB,IAAI,EACjCC,EAAWH,GAAe,UAAY,GACtCK,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,KAE9D,eAAYH,EAAK,CACf,cAAAP,EACA,cAAAC,EACA,eAAgBG,GAAM,MACtB,UAAWC,GAAe,OAAS,GAAK,CAC1C,CAAC,EAED,MAAMM,EAAWD,GAAYN,GAAM,aAAa,IAAMA,EAAK,YAAY,IAAMA,GAAM,UAAU,IACvFQ,EAAWF,GAAYN,GAAM,aAAa,IAAMA,EAAK,YAAY,IAAMA,GAAM,UAAU,IACvFS,EAAYD,GAAYR,GAAM,UAAU,cAAgB,GAE9D,SACE,QAAC,OACC,IAAKG,EACL,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n ({ className = '', data, id, style }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, -2px, 0);\n }\n to {\n transform: translate3d(0, -2px, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n theme={theme}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n theme={theme}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "import_SwiperBox", "import_useExposure", "import_modules", "import_css", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "style", "title", "subtitle", "items", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var k=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of H(e))!P.call(t,s)&&s!==r&&c(t,s,{get:()=>e[s],enumerable:!(l=g(e,s))||l.enumerable});return t};var y=(t,e,r)=>(r=t!=null?k(v(t)):{},u(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),T=t=>u(c({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=T(R);var o=require("react/jsx-runtime"),p=y(require("react")),a=require("../../components/index.js"),d=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=p.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:s,ctaText:m,poster:b,mobPoster:x,ctaLink:_,theme:N="light"}=t,i=(0,p.useRef)(null);return(0,f.useExposure)(i,{componentType:L,componentName:D,componentTitle:l,componentDescription:s}),(0,p.useImperativeHandle)(r,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,d.cn)("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":N==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),m&&(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(a.Button,{className:"product-hero__cta-button w-fit",children:m})})]}),(0,o.jsx)(a.Picture,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${b?.url}, ${x?.url} 768`,imgClassName:"h-full object-cover"})]})});n.displayName="ProductHero";var E=(0,h.withLayout)(n);
|
|
2
2
|
//# sourceMappingURL=ProductHero.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n <div className=\"product-hero__text\">\n <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n />\n </div>\n {ctaText && (\n <a href={ctaLink} className=\"product-hero__cta-link\">\n <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n </a>\n )}\n </div>\n <Picture\n className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n source={`${poster?.url}, ${mobPoster?.url} 768`}\n />\n </section>\n )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMQ,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaD,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,EACCC,MACC,OAAC,KAAE,KAAMG,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n <div className=\"product-hero__text\">\n <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n />\n </div>\n {ctaText && (\n <a href={ctaLink} className=\"product-hero__cta-link\">\n <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n </a>\n )}\n </div>\n <Picture\n className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n source={`${poster?.url}, ${mobPoster?.url} 768`}\n imgClassName=\"h-full object-cover\"\n />\n </section>\n )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMQ,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaD,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,EACCC,MACC,OAAC,KAAE,KAAMG,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
|
|
6
6
|
"names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var k=Object.create;var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(o,r)=>{for(var a in r)n(o,a,{get:r[a],enumerable:!0})},v=(o,r,a,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of y(r))!T.call(o,s)&&s!==a&&n(o,s,{get:()=>r[s],enumerable:!(d=N(r,s))||d.enumerable});return o};var L=(o,r,a)=>(a=o!=null?k(S(o)):{},v(r||!o||!o.__esModule?n(a,"default",{value:o,enumerable:!0}):a,o)),E=o=>v(n({},"__esModule",{value:!0}),o);var R={};C(R,{default:()=>B});module.exports=E(R);var e=require("react/jsx-runtime"),i=L(require("react")),l=require("../../components/index.js"),p=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),c=require("swiper/react"),u=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),I=require("swiper/css/pagination"),O=require("swiper/css/effect-coverflow");const z="carousel",D="three_d_carousel",j=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=i.default.forwardRef(({data:o,className:r},a)=>{const{title:d,items:s=[]}=o,g=s.length<4?[...s,...s]:s,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,_.useExposure)(f,{componentType:z,componentName:D,componentTitle:d}),(0,i.useImperativeHandle)(a,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,p.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[(0,e.jsx)(c.Swiper,{onSwiper:t=>h.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[u.EffectCoverflow,u.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:
|
|
1
|
+
"use strict";"use client";var k=Object.create;var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(o,r)=>{for(var a in r)n(o,a,{get:r[a],enumerable:!0})},v=(o,r,a,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of y(r))!T.call(o,s)&&s!==a&&n(o,s,{get:()=>r[s],enumerable:!(d=N(r,s))||d.enumerable});return o};var L=(o,r,a)=>(a=o!=null?k(S(o)):{},v(r||!o||!o.__esModule?n(a,"default",{value:o,enumerable:!0}):a,o)),E=o=>v(n({},"__esModule",{value:!0}),o);var R={};C(R,{default:()=>B});module.exports=E(R);var e=require("react/jsx-runtime"),i=L(require("react")),l=require("../../components/index.js"),p=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),c=require("swiper/react"),u=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),I=require("swiper/css/pagination"),O=require("swiper/css/effect-coverflow");const z="carousel",D="three_d_carousel",j=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=i.default.forwardRef(({data:o,className:r},a)=>{const{title:d,items:s=[]}=o,g=s.length<4?[...s,...s]:s,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,_.useExposure)(f,{componentType:z,componentName:D,componentTitle:d}),(0,i.useImperativeHandle)(a,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,p.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[(0,e.jsx)(c.Swiper,{onSwiper:t=>h.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[u.EffectCoverflow,u.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}}},children:g.map((t,m)=>(0,e.jsx)(c.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:w})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,p.cn)("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg"),imgClassName:"h-full object-cover",style:{filter:w?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,p.cn)("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!w}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},m))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>h.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(j,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>h.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(P,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:(0,e.jsx)(c.Swiper,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:s.map((t,m)=>(0,e.jsxs)(c.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(l.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95",children:t.buttonText})})]})]},m))})})]})});x.displayName="ThreeDCarousel";var B=(0,b.withLayout)(x);
|
|
2
2
|
//# sourceMappingURL=ThreeDCarousel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const cloneItems = items.length < 4 ? [...items, ...items] : items\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={0}\n loop\n slidesPerView={'auto'}\n // loopAdditionalSlides={2}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch:
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBE,IAAAI,EAAA,6BAnBFC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAE5BJ,EAAoC,wBACpCK,EAA4C,0BAG5CC,EAAO,sBACPC,EAAO,iCACPC,EAAO,iCACPC,EAAO,uCAEP,MAAMC,EAAgB,WAChBC,EAAgB,mBAEhBC,EAAc,OAClB,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,8FAEV,oBAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAK,eAAe,YAAY,MAAM,KACrE,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,UAAU,cAAc,QAAQ,eAAe,QAAQ,GACjH,EAGIC,EAAe,OACnB,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,8FAEV,oBAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAK,eAAe,YAAY,MAAM,KACrE,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,UAAU,cAAc,QAAQ,eAAe,QAAQ,GACjH,EAGIC,EAAiB,EAAAC,QAAM,WAAgD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzG,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIJ,EACxBK,EAAaD,EAAM,OAAS,EAAI,CAAC,GAAGA,EAAO,GAAGA,CAAK,EAAIA,EACvDE,KAAY,UAA0B,IAAI,EAC1CC,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBQ,CAClB,CAAC,KAED,uBAAoBD,EAAK,IAAMK,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,iBACrB,aAAW,MAAG,6EAA8EN,CAAS,EAErG,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAME,EAAO,UAAU,uDAAuD,KAGxG,QAAC,OAAI,UAAU,uFACb,oBAAC,UACC,SAAUK,GAAWF,EAAU,QAAUE,EACzC,eAAgB,GAChB,aAAc,EACd,KAAI,GACJ,cAAe,OAEf,aAAc,EACd,WAAU,GACV,QAAS,CAAC,kBAAiB,YAAU,EACrC,oBAAmB,GACnB,UAAU,mFACV,OAAO,YACP,gBAAiB,CACf,OAAQ,EACR,QAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const cloneItems = items.length < 4 ? [...items, ...items] : items\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={0}\n loop\n slidesPerView={'auto'}\n // loopAdditionalSlides={2}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {cloneItems.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n >\n {({ isActive }) => (\n <>\n <Picture\n source={item.imageUrl?.url || ''}\n alt={item.imageUrl?.alt || item.title}\n className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg')}\n imgClassName=\"h-full object-cover\"\n style={{\n filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n }}\n />\n <div\n className={cn(\n 'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'opacity-0': !isActive,\n }\n )}\n >\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-description text-[14px]\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n <Button\n size=\"base\"\n variant=\"secondary\"\n className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n >\n {item.buttonText}\n </Button>\n </a>\n )}\n </div>\n </>\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n\n {/* Mobile carousel */}\n <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n <Swiper\n loop={true}\n slidesPerView={'auto'}\n spaceBetween={12}\n grabCursor\n className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n >\n <Picture\n source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n alt={item.mobImageUrl?.alt || item.title}\n className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg\"\n imgClassName=\"h-full object-cover\"\n />\n <div className=\"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]\">\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n <button className=\"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95\">\n {item.buttonText}\n </button>\n </a>\n )}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ThreeDCarousel_exports", "__export", "ThreeDCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_modules", "import_css", "import_navigation", "import_pagination", "import_effect_coverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "React", "data", "className", "ref", "title", "items", "cloneItems", "swiperRef", "boxRef", "swiper", "item", "index", "isActive"]
|
|
7
7
|
}
|