@anker-in/headless-ui 1.1.9-alpha.1764231216581 → 1.1.9-alpha.1764237195908
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +1 -1
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +2 -2
- package/dist/cjs/biz-components/MarqueeReview/index.js +1 -1
- package/dist/cjs/biz-components/MarqueeReview/index.js.map +3 -3
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +1 -1
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +2 -2
- package/dist/esm/biz-components/MarqueeReview/index.js +1 -1
- package/dist/esm/biz-components/MarqueeReview/index.js.map +3 -3
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
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:427,depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,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",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 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\">\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: 427,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: 427,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: 350,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: 334,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: 230,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: 286,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {
|
|
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,KAAY,UAA0B,IAAI,EAC1CC,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,
|
|
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", "swiperRef", "boxRef", "swiper", "item", "index", "isActive"]
|
|
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: 427,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: 427,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: 350,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: 334,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: 230,\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: 286,\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\"\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
|
+
"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
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import F,{useImperativeHandle as ee,useRef as b,useState as te,useEffect as ae}from"react";import h from"gsap";import{ScrollTrigger as x}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as re}from"react-intersection-observer";import oe from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as V,Picture as A,Text as le}from"../../components/index.js";import se from"./Countdown.js";import{cn as n}from"../../helpers/index.js";import{withLayout as ne}from"../../shared/Styles.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as pe}from"../../components/button.js";import{VideoModal as ce}from"../VideoModal/index.js";const o="image",l="hero_banner",ue=({size:v="base"})=>{const{width:y,height:w}=pe[v];return e("svg",{width:y,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Q=F.forwardRef(({data:v,className:y},w)=>{const{label:R,title:t,subtitle:a,endDate:P,endDate_tz:Z,dateFormat:G,pcImage:k,padImage:M,mobileImage:f,pcVideo:J,padVideo:K,mobileVideo:C,isShowVideo:O,primaryButton:u,secondaryButton:r,theme:W="light",size:N="default",caption:$=[],blockLink:L,iconArray:X}=v,D=q({query:"(max-width: 768px)"}),S=q({query:"(max-width: 1024px)"}),[E,U]=te(!1),{ref:Y,inView:_}=re(),T=b(null),z=b(null),B=b(null),d=b(null),s=b(null);return ie(s,{componentType:o,componentName:l,componentTitle:t,componentDescription:a}),ee(w,()=>s.current),ae(()=>{h.registerPlugin(x);function p(){if(!d.current)return;const c=s.current?.clientHeight||100;window.innerHeight<=c?T.current=x.create({trigger:s.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*40-20;h.set(d.current,{yPercent:g})}}):(B.current=x.create({trigger:s.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:m=>{const g=m.progress*20-20;h.set(d.current,{yPercent:g})}}),z.current=x.create({trigger:s.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*20;h.set(d.current,{yPercent:g})}}))}return _&&p(),()=>{T.current&&T.current.kill(),B.current&&B.current.kill(),z.current&&z.current.kill()}},[_]),e("div",{ref:Y,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:i("div",{ref:s,className:n(W==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},y),children:[L&&e("a",{className:"absolute inset-0 z-10",href:I(L,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":t}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:O?e(oe,{poster:D?f?.url:S?M?.url||f?.url:k?.url,src:D?C?.url:S?K?.url||C?.url:J?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${M?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),i("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[i("div",{className:"laptop:text-left max-w-[686px]",children:[R&&e(V,{as:"h3",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:R}),t&&e(V,{as:"h2",size:N==="sm"?4:5,className:n("hero-banner-title"),html:t}),a&&e(V,{as:"h3",className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&e("div",{className:"mt-3",children:e(se,{endDate:P,endDate_tz:Z,dateFormat:G})})]}),i("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?i(H,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",e(ue,{size:"lg"})]}):r?.text?i(H,{"aria-label":t??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:I(r?.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.text}`,children:[r?.text,e("span",{className:"sr-only",children:t??a})]}):null,u&&u.text&&e(H,{"aria-label":t??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:I(u.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${u?.text}`,children:u.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:X?.map((p,c)=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:p?.pcImage?.alt||"",source:p?.pcImage?.url})},c))})]}),$.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:$.map((p,c)=>i(F.Fragment,{children:[e(le,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:p.title}),c<$.length-1&&e("div",{className:n("bg-info-primary w-px")})]},c))}),E&&e(ce,{visible:E,videoUrl:r?.videoUrl?.url,youTubeId:r?.youtubeId,onCloseModal:()=>U(!1)})]})})});Q.displayName="HeroBanner";var Be=ne(Q);export{Be as default};
|
|
1
|
+
"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import F,{useImperativeHandle as ee,useRef as b,useState as te,useEffect as ae}from"react";import h from"gsap";import{ScrollTrigger as x}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as re}from"react-intersection-observer";import oe from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as V,Picture as A,Text as le}from"../../components/index.js";import se from"./Countdown.js";import{cn as n}from"../../helpers/index.js";import{withLayout as ne}from"../../shared/Styles.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as pe}from"../../components/button.js";import{VideoModal as ce}from"../VideoModal/index.js";const o="image",l="hero_banner",ue=({size:v="base"})=>{const{width:y,height:w}=pe[v];return e("svg",{width:y,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Q=F.forwardRef(({data:v,className:y},w)=>{const{label:R,title:t,subtitle:a,endDate:P,endDate_tz:Z,dateFormat:G,pcImage:k,padImage:M,mobileImage:f,pcVideo:J,padVideo:K,mobileVideo:C,isShowVideo:O,primaryButton:u,secondaryButton:r,theme:W="light",size:N="default",caption:$=[],blockLink:L,iconArray:X}=v,D=q({query:"(max-width: 768px)"}),S=q({query:"(max-width: 1024px)"}),[E,U]=te(!1),{ref:Y,inView:_}=re(),T=b(null),z=b(null),B=b(null),d=b(null),s=b(null);return ie(s,{componentType:o,componentName:l,componentTitle:t,componentDescription:a}),ee(w,()=>s.current),ae(()=>{h.registerPlugin(x);function p(){if(!d.current)return;const c=s.current?.clientHeight||100;window.innerHeight<=c?T.current=x.create({trigger:s.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*40-20;h.set(d.current,{yPercent:g})}}):(B.current=x.create({trigger:s.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:m=>{const g=m.progress*20-20;h.set(d.current,{yPercent:g})}}),z.current=x.create({trigger:s.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*20;h.set(d.current,{yPercent:g})}}))}return _&&p(),()=>{T.current&&T.current.kill(),B.current&&B.current.kill(),z.current&&z.current.kill()}},[_]),e("div",{ref:Y,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:i("div",{ref:s,className:n(W==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},y),children:[L&&e("a",{className:"absolute inset-0 z-10",href:I(L,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":t}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:O?e(oe,{poster:D?f?.url:S?M?.url||f?.url:k?.url,src:D?C?.url:S?K?.url||C?.url:J?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${M?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),i("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[i("div",{className:"laptop:text-left max-w-[686px]",children:[R&&e(V,{as:"h3",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:R}),t&&e(V,{as:"h2",size:N==="sm"?4:5,className:n("hero-banner-title"),html:t}),a&&e(V,{as:"h3",className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&e("div",{className:"mt-3",children:e(se,{endDate:P,endDate_tz:Z,dateFormat:G})})]}),i("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?i(H,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",e(ue,{size:"lg"})]}):r?.text?i(H,{"aria-label":t??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:I(r?.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.text}`,children:[r?.text,e("span",{className:"sr-only",children:t??a})]}):null,u&&u.text&&e(H,{"aria-label":t??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:I(u.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${u?.text}`,children:u.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:X?.map((p,c)=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:p?.pcImage?.alt||"",source:p?.pcImage?.url})},c))})]}),$.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:$.map((p,c)=>i(F.Fragment,{children:[e(le,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:p.title}),c<$.length-1&&e("div",{className:n("bg-info-primary w-px")})]},c))}),E&&e(ce,{visible:E,videoUrl:r?.videoUrl?.url,youTubeId:r?.youtubeId,onCloseModal:()=>U(!1)})]})})});Q.displayName="HeroBanner";var Be=ne(Q);export{Be as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\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 useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\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 useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover !w-auto\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "icon", "index", "c", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as x}from"react/jsx-runtime";import ue,{useImperativeHandle as fe,useRef as f,useState as v,useEffect as X}from"react";import{Heading as b,Picture as M,Text as z,Button as ve}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withLayout as he}from"../../shared/Styles.js";import{useExposure as ge}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as _e}from"../../hooks/useIntersectionObserver.js";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{Cols as w}from"./types.js";const be="image",we="image_with_text",ee=ue.forwardRef(({data:te,className:ie},ae)=>{const{title:P,subtitle:S,desc:y,descIcon:D,image:h,padImage:E,mobileImage:H,theme:oe="dark",items:j=[],layout:le="left",mediaType:se="image",datalist:l=[],video:W,padVideo:R,mobVideo:A,cols:k=w.One,button:g,textAlign:o="left"}=te,d=le,L=f(null),N=f(null),T=f(null),I=f(null),q=f(null),[n,re]=v(0),$=f([]),[B,me]=v({left:0,width:0}),[u,C]=v(""),[F,O]=v(""),[G,J]=v(""),r=l.length>0,_=se==="video";ge(L,{componentType:be,componentName:we,componentTitle:P,componentDescription:S}),fe(ae,()=>L.current),X(()=>{if(l.length>0){const t=$.current[n];if(t){const{offsetLeft:a,offsetWidth:i}=t;me({left:a,width:i})}}},[n,l.length]);const[K,de]=v(!1);_e(q,{once:!0,threshold:.01,callback:()=>{de(!0)}}),X(()=>{if(!K||!_)return;let t="",a="",i="";if(r&&l[n]){const c=l[n];t=c.video?.url||"",a=c.padVideo?.url||t,i=c.mobVideo?.url||t}else t=W?.url||"",a=R?.url||t,i=A?.url||t;t&&C(t),a&&O(a),i&&J(i),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(p=>{p&&(p.load(),p.play().catch(()=>{}))})},200)},[K,_,r,n,l,W?.url,R?.url,A?.url]);const ne=(t,a)=>{if(re(t),a.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&r&&l[t]){const i=l[t];i.video?.url&&C(i.video.url),i.padVideo?.url&&O(i.padVideo.url),i.mobVideo?.url&&J(i.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(p=>{p&&(p.load(),p.play().catch(()=>{}))})},300)}},ce=()=>!V||!g?.text?null:e("div",{className:s("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":o==="center","flex justify-start":o==="left"}),children:e(ve,{as:"a",href:g.link,variant:g.variant||"secondary",size:"base",className:"image-with-text__button",children:g.text})}),m=j.length>0,V=!!g,Q=()=>{if(r&&l[n]){const t=l[n];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return h?`${h?.url},${E?.url||h?.url} 1024, ${H?.url||h?.url} 768`:""},U=()=>{if(r){const c=l[n],p=c.image?.url,pe=c.imgPad?.url||p,xe=c.imageMob?.url||p;return e(Z,{mode:"wait",children:e(Y.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:x("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:u,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:F||u,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:G||u,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=h?.url,a=E?.url||t,i=H?.url||t;return x("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:u,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:F||u,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:i,src:G||u,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return x("section",{ref:L,"data-ui-component-id":"ImageWithText",className:s("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!r,"flex-col":!r&&(d==="top"||d==="bottom"),"items-center":d==="left"||d==="right","flex-col laptop:flex-row":!r&&(d==="left"||d==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":r,"aiui-dark":oe==="dark"},ie),children:[r&&x("div",{className:s("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":o==="left","text-center":o==="center"}),children:[x("div",{className:"image-with-text__header",children:[e(b,{as:"h3",size:4,html:P,className:"image-with-text__title"}),e(z,{as:"p",size:1,html:y,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:s("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":o==="center"}),children:x("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:B.left,width:B.width}}),l.map((t,a)=>e("div",{ref:i=>{$.current[a]=i},onClick:i=>ne(a,i),className:s("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===a?"image-with-text__tab--active text-black":"text-white"),children:e(b,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},a))]})})]}),!r&&x("div",{className:s("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":m,"items-start":o==="left","items-center":o==="center","text-left":o==="left","text-center":o==="center","laptop:order-1":d==="left"}),children:[x("div",{className:s("image-with-text__main-content",{"flex flex-col":V}),children:[e(b,{as:"h2",size:4,html:P,className:s("image-with-text__title",{"w-full":m,"text-left":m&&o==="left","text-center":m&&o==="center"})}),S&&e(z,{as:"p",size:m?4:3,html:S,className:s("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&o==="left","text-center":m&&o==="center"})}),!m&&(y||D)&&x("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[D&&e("img",{src:D,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),y&&e(b,{as:"h4",size:5,html:y,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]"})]}),m&&e("div",{className:s("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":d==="top"||d==="bottom","grid-cols-1":k===w.One,"grid-cols-2":k===w.Two,"grid-cols-3":k===w.Three,"grid-cols-4":k===w.Four}),children:j.map((t,a)=>x("div",{className:s("image-with-text__item",{"text-center":o==="center"}),children:[x("div",{className:s("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":o==="center","justify-start":o==="left"}),children:[e(M,{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"}),e(b,{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})]}),e(z,{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]"})]},a))})]}),ce()]}),e("div",{ref:q,className:s("image-with-text__media-wrapper",{"w-[60%] shrink-0":d==="left"||d==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&d==="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]":r}),children:r?_?U():e(Z,{mode:"wait",children:e(Y.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:e(M,{source:Q(),alt:l[n].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]"})},l[n].image?.url)}):_?U():e(M,{source:Q(),className:s("image-with-text__image rounded-box laptop:rounded-box")})})]})});ee.displayName="ImageWithText";var De=he(ee);export{De as default};
|
|
1
|
+
"use client";import{jsx as e,jsxs as x}from"react/jsx-runtime";import ue,{useImperativeHandle as fe,useRef as f,useState as v,useEffect as X}from"react";import{Heading as b,Picture as M,Text as z,Button as ve}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withLayout as he}from"../../shared/Styles.js";import{useExposure as ge}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as _e}from"../../hooks/useIntersectionObserver.js";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{Cols as w}from"./types.js";const be="image",we="image_with_text",ee=ue.forwardRef(({data:te,className:ie},ae)=>{const{title:P,subtitle:S,desc:y,descIcon:D,image:h,padImage:E,mobileImage:H,theme:oe="dark",items:j=[],layout:le="left",mediaType:se="image",datalist:l=[],video:W,padVideo:R,mobVideo:A,cols:k=w.One,button:g,textAlign:o="left"}=te,d=le,L=f(null),N=f(null),T=f(null),I=f(null),q=f(null),[n,re]=v(0),$=f([]),[B,me]=v({left:0,width:0}),[u,C]=v(""),[F,O]=v(""),[G,J]=v(""),r=l.length>0,_=se==="video";ge(L,{componentType:be,componentName:we,componentTitle:P,componentDescription:S}),fe(ae,()=>L.current),X(()=>{if(l.length>0){const t=$.current[n];if(t){const{offsetLeft:a,offsetWidth:i}=t;me({left:a,width:i})}}},[n,l.length]);const[K,de]=v(!1);_e(q,{once:!0,threshold:.01,callback:()=>{de(!0)}}),X(()=>{if(!K||!_)return;let t="",a="",i="";if(r&&l[n]){const c=l[n];t=c.video?.url||"",a=c.padVideo?.url||t,i=c.mobVideo?.url||t}else t=W?.url||"",a=R?.url||t,i=A?.url||t;t&&C(t),a&&O(a),i&&J(i),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(p=>{p&&(p.load(),p.play().catch(()=>{}))})},200)},[K,_,r,n,l,W?.url,R?.url,A?.url]);const ne=(t,a)=>{if(re(t),a.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&r&&l[t]){const i=l[t];i.video?.url&&C(i.video.url),i.padVideo?.url&&O(i.padVideo.url),i.mobVideo?.url&&J(i.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(p=>{p&&(p.load(),p.play().catch(()=>{}))})},300)}},ce=()=>!V||!g?.text?null:e("div",{className:s("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":o==="center","flex justify-start":o==="left"}),children:e(ve,{as:"a",href:g.link,variant:g.variant||"secondary",size:"base",className:"image-with-text__button",children:g.text})}),m=j.length>0,V=!!g,Q=()=>{if(r&&l[n]){const t=l[n];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return h?`${h?.url},${E?.url||h?.url} 1024, ${H?.url||h?.url} 768`:""},U=()=>{if(r){const c=l[n],p=c.image?.url,pe=c.imgPad?.url||p,xe=c.imageMob?.url||p;return e(Z,{mode:"wait",children:e(Y.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:x("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:u,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:F||u,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:G||u,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=h?.url,a=E?.url||t,i=H?.url||t;return x("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:u,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:F||u,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:i,src:G||u,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return x("section",{ref:L,"data-ui-component-id":"ImageWithText",className:s("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!r,"flex-col":!r&&(d==="top"||d==="bottom"),"items-center":d==="left"||d==="right","flex-col laptop:flex-row":!r&&(d==="left"||d==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":r,"aiui-dark":oe==="dark"},ie),children:[r&&x("div",{className:s("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":o==="left","text-center":o==="center"}),children:[x("div",{className:"image-with-text__header",children:[e(b,{as:"h3",size:4,html:P,className:"image-with-text__title"}),e(z,{as:"p",size:1,html:y,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:s("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":o==="center"}),children:x("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:B.left,width:B.width}}),l.map((t,a)=>e("div",{ref:i=>{$.current[a]=i},onClick:i=>ne(a,i),className:s("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===a?"image-with-text__tab--active text-black":"text-white"),children:e(b,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},a))]})})]}),!r&&x("div",{className:s("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":m,"items-start":o==="left","items-center":o==="center","text-left":o==="left","text-center":o==="center","laptop:order-1":d==="left"}),children:[x("div",{className:s("image-with-text__main-content",{"flex flex-col":V}),children:[e(b,{as:"h2",size:4,html:P,className:s("image-with-text__title",{"w-full":m,"text-left":m&&o==="left","text-center":m&&o==="center"})}),S&&e(z,{as:"p",size:m?4:3,html:S,className:s("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&o==="left","text-center":m&&o==="center"})}),!m&&(y||D)&&x("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[D&&e("img",{src:D,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),y&&e(b,{as:"h4",size:5,html:y,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]"})]}),m&&e("div",{className:s("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":d==="top"||d==="bottom","grid-cols-1":k===w.One,"grid-cols-2":k===w.Two,"grid-cols-3":k===w.Three,"grid-cols-4":k===w.Four}),children:j.map((t,a)=>x("div",{className:s("image-with-text__item",{"text-center":o==="center"}),children:[x("div",{className:s("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":o==="center","justify-start":o==="left"}),children:[e(M,{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"}),e(b,{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})]}),e(z,{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]"})]},a))})]}),ce()]}),e("div",{ref:q,className:s("image-with-text__media-wrapper",{"w-[60%] shrink-0":d==="left"||d==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&d==="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]":r}),children:r?_?U():e(Z,{mode:"wait",children:e(Y.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:e(M,{source:Q(),alt:l[n].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]"})},l[n].image?.url)}):_?U():e(M,{source:Q(),className:s("image-with-text__image rounded-box laptop:rounded-box")})})]})});ee.displayName="ImageWithText";var De=he(ee);export{De as default};
|
|
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"],
|
|
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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "Button", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "Cols", "componentType", "componentName", "ImageWithText", "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", "ImageWithText_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as h,jsx as p,jsxs as n}from"react/jsx-runtime";import{Heading as r,Picture as m,Text as u}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as x}from"../../shared/Styles.js";const b=({title:l,desc:t,image:o,mobImage:a,video:s,mobVideo:e,className:c,theme:d})=>n("div",{className:i("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":d==="dark"},c),children:[s&&e?n(h,{children:[p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:s?.url,poster:o?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:e?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block -translate-y-[80px] object-contain object-center"})]}):(o||a)&&p(m,{source:o?.url||a?.url,alt:o?.alt||a?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),n("div",{className:"ksp-card-content desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px] absolute left-[16px] top-[16px]",children:[p(r,{size:3,html:l,className:"ksp-card-title tablet:block hidden w-full"}),p(r,{size:2,html:l,className:"ksp-card-title tablet:hidden tablet:w-[340px] block w-full"}),p(u,{size:2,html:t,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]})]}),k={4:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-2 laptop:col-span-6"},5:{0:"col-span-2 laptop:col-span-6",1:"col-span-2 tablet:col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-1 laptop:col-span-4",4:"col-span-2 tablet:col-span-1 laptop:col-span-3"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4"},7:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4",6:"col-span-2 laptop:col-span-6"},8:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-4"},9:{0:"col-span-2 laptop:col-span-3",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-4",3:"col-span-1 tablet:col-span-2 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-3",8:"col-span-2 laptop:col-span-4"}},f=(l,t)=>k[t]?.[l]||"";function g({data:l,className:t}){const{title:o,items:a,theme:s="light"}=l;return n("section",{"data-ui-component-id":"ksp",className:i("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":s==="dark"},t),children:[p(r,{as:"h1",size:4,html:o,className:"ksp-title laptop:text-center text-left text-white"}),p("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:a.map((e,c)=>p(b,{...e,className:f(c,a.length)},c))})]})}var C=x(g);export{C as default};
|
|
1
|
+
import{Fragment as x,jsx as t,jsxs as d}from"react/jsx-runtime";import{Heading as h,Picture as n,Text as b}from"../../components/index.js";import{cn as w}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";const r=({title:a,desc:s,image:e,mobImage:p,video:c,mobVideo:l,className:o,theme:k})=>d("div",{className:w("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":k==="dark"},o),children:[c&&l?d(x,{children:[t("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:e?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),t("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:l?.url,poster:p?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center"})]}):(e||p)&&t(n,{source:e?.url||p?.url,alt:e?.alt||p?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),d("div",{className:"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",children:[t(h,{size:3,html:a,className:"ksp-card-title tablet:block hidden w-full break-all"}),t(h,{size:2,html:a,className:"ksp-card-title tablet:hidden tablet:w-[340px] block w-full break-all"}),t(b,{size:2,html:s,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]"})]})]}),i={4:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},5:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},7:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},8:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},9:{0:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",8:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"}},m=(a,s)=>i[s]?.[a]||"";function u({data:a,className:s}){const{title:e,items:p,theme:c="light"}=a;return d("section",{"data-ui-component-id":"ksp",className:w("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},s),children:[t(h,{as:"h1",size:4,html:e,className:"ksp-title laptop:text-center text-left text-white"}),t("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:p.map((l,o)=>t(r,{...l,className:m(o,p.length)},o))})]})}var y=g(u);export{y as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|