@anker-in/headless-ui 1.0.26-alpha.1762512179373 → 1.0.26-alpha.1762756639604
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/FeatureCards/FeatureCards.js +1 -1
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +2 -2
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.js +1 -1
- package/dist/cjs/biz-components/FeatureShowcase/FeatureShowcase.js.map +2 -2
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.js +1 -1
- package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.js +1 -1
- package/dist/cjs/biz-components/TabWithImage/TabWithImage.js.map +2 -2
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.js +1 -1
- package/dist/cjs/biz-components/VideoFeature/VideoFeature.js.map +2 -2
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +2 -2
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js +1 -1
- package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js.map +2 -2
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.js +1 -1
- package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +3 -3
- package/dist/esm/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/esm/biz-components/TabWithImage/TabWithImage.js +1 -1
- package/dist/esm/biz-components/TabWithImage/TabWithImage.js.map +2 -2
- package/dist/esm/biz-components/VideoFeature/VideoFeature.js +1 -1
- package/dist/esm/biz-components/VideoFeature/VideoFeature.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var D=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var l in a)x(t,l,{get:a[l],enumerable:!0})},v=(t,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of H(a))!M.call(t,p)&&p!==l&&x(t,p,{get:()=>a[p],enumerable:!(c=E(a,p))||c.enumerable});return t};var P=(t,a,l)=>(l=t!=null?D(L(t)):{},v(a||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),R=t=>v(x({},"__esModule",{value:!0}),t);var $={};W($,{default:()=>S});module.exports=R($);var e=require("react/jsx-runtime"),i=P(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=require("../../hooks/useExposure.js"),b=require("framer-motion");const z="image",A="tab_with_image",_=i.default.forwardRef(({data:t,className:a},l)=>{const{title:c,subtitle:p,desc:h,image:j,mobileImage:C,datalist:s=[]}=t,f=(0,i.useRef)(null);(0,T.useExposure)(f,{componentType:z,componentName:A,componentTitle:c,componentDescription:h}),(0,i.useImperativeHandle)(l,()=>f.current);const N=(r,o)=>{I(r),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[m,I]=(0,i.useState)(0),u=(0,i.useRef)([]),[w,k]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=u.current[m];if(r){const{offsetLeft:o,offsetWidth:d}=r;k({left:o,width:d})}},[m,s.length]),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"TabWithImage",className:(0,g.cn)("tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,e.jsxs)("div",{className:"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"tab-with-image__header",children:[(0,e.jsx)(n.Heading,{as:"h3",size:4,html:c,className:"tab-with-image__title"}),(0,e.jsx)(n.Text,{as:"p",size:1,html:h,className:"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:w.left,width:w.width}}),s.map((r,o)=>(0,e.jsx)("div",{ref:d=>{u.current[o]=d},onClick:d=>N(o,d),className:(0,g.cn)("tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",m===o?"tab-with-image__tab--active text-black":"text-white"),children:(0,e.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),(0,e.jsx)("div",{className:"tab-with-image__image-wrapper relative w-full flex-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]",children:(0,e.jsx)(b.AnimatePresence,{mode:"wait",children:s[m]&&(0,e.jsx)(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"tab-with-image__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(n.Picture,{source:`${s[m].image
|
|
1
|
+
"use strict";"use client";var D=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var l in a)x(t,l,{get:a[l],enumerable:!0})},v=(t,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of H(a))!M.call(t,p)&&p!==l&&x(t,p,{get:()=>a[p],enumerable:!(c=E(a,p))||c.enumerable});return t};var P=(t,a,l)=>(l=t!=null?D(L(t)):{},v(a||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),R=t=>v(x({},"__esModule",{value:!0}),t);var $={};W($,{default:()=>S});module.exports=R($);var e=require("react/jsx-runtime"),i=P(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=require("../../hooks/useExposure.js"),b=require("framer-motion");const z="image",A="tab_with_image",_=i.default.forwardRef(({data:t,className:a},l)=>{const{title:c,subtitle:p,desc:h,image:j,mobileImage:C,datalist:s=[]}=t,f=(0,i.useRef)(null);(0,T.useExposure)(f,{componentType:z,componentName:A,componentTitle:c,componentDescription:h}),(0,i.useImperativeHandle)(l,()=>f.current);const N=(r,o)=>{I(r),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[m,I]=(0,i.useState)(0),u=(0,i.useRef)([]),[w,k]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=u.current[m];if(r){const{offsetLeft:o,offsetWidth:d}=r;k({left:o,width:d})}},[m,s.length]),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"TabWithImage",className:(0,g.cn)("tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,e.jsxs)("div",{className:"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"tab-with-image__header",children:[(0,e.jsx)(n.Heading,{as:"h3",size:4,html:c,className:"tab-with-image__title"}),(0,e.jsx)(n.Text,{as:"p",size:1,html:h,className:"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:w.left,width:w.width}}),s.map((r,o)=>(0,e.jsx)("div",{ref:d=>{u.current[o]=d},onClick:d=>N(o,d),className:(0,g.cn)("tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",m===o?"tab-with-image__tab--active text-black":"text-white"),children:(0,e.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),(0,e.jsx)("div",{className:"tab-with-image__image-wrapper relative w-full flex-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]",children:(0,e.jsx)(b.AnimatePresence,{mode:"wait",children:s[m]&&(0,e.jsx)(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"tab-with-image__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(n.Picture,{source:`${s[m].image?.url} ,${s[m].imgPad?.url||s[m].image?.url} 1440, ${s[m].imageMob?.url||s[m].image?.url} 767`,alt:s[m].image?.alt,className:"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},s[m].image?.url)})})]})});_.displayName="TabWithImage";var S=(0,y.withLayout)(_);
|
|
2
2
|
//# sourceMappingURL=TabWithImage.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/TabWithImage/TabWithImage.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { 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 { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: desc,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n })\n }\n\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n useEffect(() => {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }, [activeIndex, datalist.length])\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"TabWithImage\"\n className={cn(\n 'tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n className\n )}\n >\n <div className=\"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n <div className=\"tab-with-image__header\">\n <Heading as={'h3'} size={4} html={title} className=\"tab-with-image__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] 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: TabWithImageDataItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleClick(index, e)}\n className={cn(\n 'tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n activeIndex === index ? 'tab-with-image__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n <div className=\"tab-with-image__image-wrapper relative w-full flex-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 <AnimatePresence mode=\"wait\">\n {datalist[activeIndex] && (\n <motion.div\n key={datalist[activeIndex].image
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyDQ,IAAAI,EAAA,6BAxDRC,EAAwE,oBACxEC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAE5BC,EAAwC,yBAExC,MAAMC,EAAgB,QAChBC,EAAgB,iBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAW,CAAC,CAAE,EAAIR,EAE/DS,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBE,CACxB,CAAC,KAED,uBAAoBH,EAAK,IAAMO,EAAO,OAAyB,EAE/D,MAAMC,EAAc,CAACC,EAAeC,IAAwC,CAC1EC,EAAeF,CAAK,EAClBC,EAAE,OAAuB,eAAe,CACxC,SAAU,SACV,OAAQ,SACR,MAAO,SACT,CAAC,CACH,EAEM,CAACE,EAAaD,CAAc,KAAI,YAAS,CAAC,EAC1CE,KAAU,UAAqC,CAAC,CAAC,EACjD,CAACC,EAAaC,CAAc,KAAI,YAAS,CAAE,KAAM,EAAG,MAAO,CAAE,CAAC,EAEpE,sBAAU,IAAM,CACd,MAAMC,EAAUH,EAAQ,QAAQD,CAAW,EAC3C,GAAII,EAAS,CACX,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAY,EAAIF,EACpCD,EAAe,CAAE,KAAME,EAAY,MAAOC,CAAY,CAAC,CACzD,CACF,EAAG,CAACN,EAAaN,EAAS,MAAM,CAAC,KAG/B,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MACT,mGACAR,CACF,EAEA,qBAAC,OAAI,UAAU,mGACb,qBAAC,OAAI,UAAU,yBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,wBAAwB,KAC3E,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAME,EACN,UAAU,oIACZ,GACF,KAEA,OAAC,OAAI,UAAU,oGACb,oBAAC,OAAI,UAAU,8FAEb,oBAAC,OACC,UAAU,iHACV,MAAO,CACL,KAAMW,EAAY,KAClB,MAAOA,EAAY,KACrB,EACF,EAGCR,EAAS,IAAI,CAACa,EAA4BV,OACzC,OAAC,OAEC,IAAKW,GAAM,CACTP,EAAQ,QAAQJ,CAAK,EAAIW,CAC3B,EACA,QAASV,GAAKF,EAAYC,EAAOC,CAAC,EAClC,aAAW,MACT,uNACAE,IAAgBH,EAAQ,yCAA2C,YACrE,EAEA,mBAAC,WACC,GAAG,KACH,KAAM,EACN,KAAMU,GAAM,MACZ,UAAU,kFACZ,GAfKV,CAgBP,CACD,GACH,EACF,GACF,KACA,OAAC,OAAI,UAAU,2NACb,mBAAC,mBAAgB,KAAK,OACnB,SAAAH,EAASM,CAAW,MACnB,OAAC,SAAO,IAAP,CAGG,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,KAAM,CAAE,QAAS,CAAE,EACnB,WAAY,CAAE,SAAU,EAAI,EAE9B,UAAU,4DAEV,mBAAC,WACC,OAAQ,GAAGN,EAASM,CAAW,EAAE,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { 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 { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: desc,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n })\n }\n\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n useEffect(() => {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }, [activeIndex, datalist.length])\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"TabWithImage\"\n className={cn(\n 'tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n className\n )}\n >\n <div className=\"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n <div className=\"tab-with-image__header\">\n <Heading as={'h3'} size={4} html={title} className=\"tab-with-image__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] 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: TabWithImageDataItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleClick(index, e)}\n className={cn(\n 'tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n activeIndex === index ? 'tab-with-image__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n <div className=\"tab-with-image__image-wrapper relative w-full flex-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 <AnimatePresence mode=\"wait\">\n {datalist[activeIndex] && (\n <motion.div\n key={datalist[activeIndex].image?.url}\n {...({\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.3 },\n } as any)}\n className=\"tab-with-image__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={`${datalist[activeIndex].image?.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image?.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image?.url} 767`}\n alt={datalist[activeIndex].image?.alt}\n className=\"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n </section>\n )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["TabWithImage_exports", "__export", "TabWithImage_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_framer_motion", "componentType", "componentName", "TabWithImage", "React", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var L=Object.create;var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},v=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of H(t))!E.call(e,d)&&d!==i&&a(e,d,{get:()=>t[d],enumerable:!(r=T(t,d))||r.enumerable});return e};var F=(e,t,i)=>(i=e!=null?L(M(e)):{},v(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),P=e=>v(a({},"__esModule",{value:!0}),e);var z={};R(z,{default:()=>g});module.exports=P(z);var l=require("react/jsx-runtime"),o=F(require("react")),s=require("../../components/index.js"),x=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),n=require("../../hooks/useIntersectionObserver.js");const S="video",I="video_feature",f=o.default.forwardRef(({data:e,className:t},i)=>{const{title:r,subtitle:d,poster:h,video:k,mobPoster:V,mobvideo:c}=e,p=(0,o.useRef)(null),u=(0,o.useRef)(null),m=(0,o.useRef)(null),[y,N]=(0,o.useState)(""),[D,w]=(0,o.useState)("");return(0,_.useExposure)(p,{componentType:S,componentName:I,componentTitle:r,componentDescription:d}),(0,o.useImperativeHandle)(i,()=>p.current),(0,n.useIntersectionObserverDelay)(u,{once:!0,threshold:.1,callback:()=>{N(k
|
|
1
|
+
"use strict";"use client";var L=Object.create;var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},v=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of H(t))!E.call(e,d)&&d!==i&&a(e,d,{get:()=>t[d],enumerable:!(r=T(t,d))||r.enumerable});return e};var F=(e,t,i)=>(i=e!=null?L(M(e)):{},v(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),P=e=>v(a({},"__esModule",{value:!0}),e);var z={};R(z,{default:()=>g});module.exports=P(z);var l=require("react/jsx-runtime"),o=F(require("react")),s=require("../../components/index.js"),x=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),n=require("../../hooks/useIntersectionObserver.js");const S="video",I="video_feature",f=o.default.forwardRef(({data:e,className:t},i)=>{const{title:r,subtitle:d,poster:h,video:k,mobPoster:V,mobvideo:c}=e,p=(0,o.useRef)(null),u=(0,o.useRef)(null),m=(0,o.useRef)(null),[y,N]=(0,o.useState)(""),[D,w]=(0,o.useState)("");return(0,_.useExposure)(p,{componentType:S,componentName:I,componentTitle:r,componentDescription:d}),(0,o.useImperativeHandle)(i,()=>p.current),(0,n.useIntersectionObserverDelay)(u,{once:!0,threshold:.1,callback:()=>{N(k?.url)}}),(0,n.useIntersectionObserverDelay)(m,{once:!0,threshold:.1,callback:()=>{c?.url&&w(c?.url)}}),(0,l.jsxs)("section",{ref:p,"data-ui-component-id":"VideoFeature",className:(0,x.cn)("video-feature flex flex-col items-center rounded-[16px] text-white",t),children:[(0,l.jsx)(s.Heading,{as:"h2",size:4,html:r,className:"video-feature__title w-full text-left laptop:text-center"}),(0,l.jsx)(s.Text,{as:"p",size:4,html:d,className:"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,l.jsxs)("div",{className:"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]",children:[(0,l.jsx)("div",{ref:u,className:"video-feature__desktop-video-container",children:(0,l.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h?.url,src:y,loop:!0,className:"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block"})}),(0,l.jsx)("div",{ref:m,className:"video-feature__mobile-video-container",children:(0,l.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:V?.url||"",src:D,loop:!0,className:"video-feature__video video-feature__video--mobile block tablet:hidden"})})]})]})});f.displayName="VideoFeature";var g=(0,b.withLayout)(f);
|
|
2
2
|
//# sourceMappingURL=VideoFeature.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/VideoFeature/VideoFeature.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } 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 type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n const { title, subtitle, poster, video, mobPoster, mobvideo } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\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 // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n setLoadedDesktopVideoSrc(video
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0DM,IAAAI,EAAA,6BAzDNC,EAA6D,oBAC7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA6C,kDAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAAIR,EAE1DS,KAAS,UAAuB,IAAI,EACpCC,KAAkB,UAAuB,IAAI,EAC7CC,KAAiB,UAAuB,IAAI,EAG5C,CAACC,EAAuBC,CAAwB,KAAI,YAAS,EAAE,EAC/D,CAACC,EAAsBC,CAAuB,KAAI,YAAS,EAAE,EAEnE,wBAAYN,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG/D,gCAA6BC,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } 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 type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n const { title, subtitle, poster, video, mobPoster, mobvideo } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\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 // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n setLoadedDesktopVideoSrc(video?.url)\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobvideo?.url) {\n setLoadedMobileVideoSrc(mobvideo?.url)\n }\n },\n })\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"VideoFeature\"\n className={cn('video-feature flex flex-col items-center rounded-[16px] text-white', className)}\n >\n <Heading as={'h2'} size={4} html={title} className=\"video-feature__title w-full text-left laptop:text-center\" />\n <Text\n as={'p'}\n size={4}\n html={subtitle}\n className=\"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n <div className=\"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]\">\n <div ref={desktopVideoRef} className=\"video-feature__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={poster?.url}\n src={loadedDesktopVideoSrc}\n loop\n className=\"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block\"\n ></video>\n </div>\n <div ref={mobileVideoRef} className=\"video-feature__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobPoster?.url || ''}\n src={loadedMobileVideoSrc}\n loop\n className=\"video-feature__video video-feature__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n </section>\n )\n})\n\nVideoFeature.displayName = 'VideoFeature'\n\nexport default withLayout(VideoFeature)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0DM,IAAAI,EAAA,6BAzDNC,EAA6D,oBAC7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA6C,kDAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAAIR,EAE1DS,KAAS,UAAuB,IAAI,EACpCC,KAAkB,UAAuB,IAAI,EAC7CC,KAAiB,UAAuB,IAAI,EAG5C,CAACC,EAAuBC,CAAwB,KAAI,YAAS,EAAE,EAC/D,CAACC,EAAsBC,CAAuB,KAAI,YAAS,EAAE,EAEnE,wBAAYN,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG/D,gCAA6BC,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,GAAO,GAAG,CACrC,CACF,CAAC,KAGD,gCAA6BK,EAAgB,CAC3C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACVH,GAAU,KACZO,EAAwBP,GAAU,GAAG,CAEzC,CACF,CAAC,KAGC,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MAAG,qEAAsER,CAAS,EAE7F,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,2DAA2D,KAC9G,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMC,EACN,UAAU,oLACZ,KACA,QAAC,OAAI,UAAU,qFACb,oBAAC,OAAI,IAAKM,EAAiB,UAAU,yCACnC,mBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQL,GAAQ,IAChB,IAAKO,EACL,KAAI,GACJ,UAAU,iHACX,EACH,KACA,OAAC,OAAI,IAAKD,EAAgB,UAAU,wCAClC,mBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQJ,GAAW,KAAO,GAC1B,IAAKO,EACL,KAAI,GACJ,UAAU,wEACX,EACH,GACF,GACF,CAEJ,CAAC,EAEDhB,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
|
|
6
6
|
"names": ["VideoFeature_exports", "__export", "VideoFeature_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "componentType", "componentName", "VideoFeature", "React", "data", "className", "ref", "title", "subtitle", "poster", "video", "mobPoster", "mobvideo", "boxRef", "desktopVideoRef", "mobileVideoRef", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as z,jsx as t,jsxs as a}from"react/jsx-runtime";import f,{useImperativeHandle as N,useRef as w}from"react";import{Heading as l,Picture as m,Text as d}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as C}from"../../shared/trackUrlRef.js";import{Swiper as F,SwiperSlide as T}from"swiper/react";const o="image",c="feature_cards",_=f.forwardRef(({data:h,className:g},v)=>{const{title:s,subtitle:r,items:x=[]}=h,p=w(null);b(p,{componentType:o,componentName:c,componentTitle:s,componentDescription:r}),N(v,()=>p.current);const k=e=>{const u=a(z,{children:[t(m,{source:e.image
|
|
1
|
+
"use client";import{Fragment as z,jsx as t,jsxs as a}from"react/jsx-runtime";import f,{useImperativeHandle as N,useRef as w}from"react";import{Heading as l,Picture as m,Text as d}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as C}from"../../shared/trackUrlRef.js";import{Swiper as F,SwiperSlide as T}from"swiper/react";const o="image",c="feature_cards",_=f.forwardRef(({data:h,className:g},v)=>{const{title:s,subtitle:r,items:x=[]}=h,p=w(null);b(p,{componentType:o,componentName:c,componentTitle:s,componentDescription:r}),N(v,()=>p.current);const k=e=>{const u=a(z,{children:[t(m,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:e.subtitle})]})]}),n=i("feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:C(e.link,`${o}_${c}`),className:n,"data-headless-type-name":`${o}#${c}`,"data-headless-title-desc-button":`${s}#${e.title}#${e.subtitle}`,children:u}):t("div",{className:n,children:u})};return a("section",{ref:p,"data-ui-component-id":"FeatureCards",className:i("feature-cards flex w-full flex-col justify-center",g),children:[a("div",{className:"feature-cards__header",children:[t(l,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:s}),r&&t(d,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:r})]}),t("div",{className:"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:x.map(e=>t(f.Fragment,{children:k(e)},e.title))}),t("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:t(F,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:x.map(e=>t(T,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:a("div",{className:i("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(m,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});_.displayName="FeatureCards";var L=y(_);export{L as default};
|
|
2
2
|
//# sourceMappingURL=FeatureCards.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [] } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const renderCard = (item: FeatureCardItem) => {\n const cardContent = (\n <>\n <Picture\n source={item.image
|
|
5
|
-
"mappings": "aA6BM,mBAAAA,EACE,OAAAC,EAMA,QAAAC,MAPF,oBA5BN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAed,EAAM,WAA8C,CAAC,CAAE,KAAAe,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,CAAE,EAAIL,EAElCM,EAASnB,EAAuB,IAAI,EAE1CM,EAAYa,EAAQ,CAClB,cAAAT,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDlB,EAAoBgB,EAAK,IAAMI,EAAO,OAAyB,EAE/D,MAAMC,EAAcC,GAA0B,CAC5C,MAAMC,EACJzB,EAAAF,EAAA,CACE,UAAAC,EAACM,EAAA,CACC,OAAQmB,EAAK,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [] } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n const renderCard = (item: FeatureCardItem) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n const cardClasses = cn(\n 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn('feature-cards flex w-full flex-col justify-center', className)}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n {items.map(item => (\n <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses", "FeatureCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import f,{useRef as h,useImperativeHandle as n}from"react";import{Picture as s,Text as l,Heading as c}from"../../components/index.js";import{cn as _}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as v}from"../../hooks/useExposure.js";const g="image",N="feature_showcase",r=f.forwardRef(({data:i,className:x},m)=>{const{datalist:d=[],datalists:u=[]}=i||{},p=h(null);return v(p,{componentType:g,componentName:N,componentTitle:"Feature Showcase"}),n(m,()=>p.current),a("section",{ref:p,"data-ui-component-id":"FeatureShowcase",className:_("feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",x),children:[e("div",{className:"feature-showcase__list flex gap-[16px]",children:d?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import f,{useRef as h,useImperativeHandle as n}from"react";import{Picture as s,Text as l,Heading as c}from"../../components/index.js";import{cn as _}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as v}from"../../hooks/useExposure.js";const g="image",N="feature_showcase",r=f.forwardRef(({data:i,className:x},m)=>{const{datalist:d=[],datalists:u=[]}=i||{},p=h(null);return v(p,{componentType:g,componentName:N,componentTitle:"Feature Showcase"}),n(m,()=>p.current),a("section",{ref:p,"data-ui-component-id":"FeatureShowcase",className:_("feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",x),children:[e("div",{className:"feature-showcase__list flex gap-[16px]",children:d?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob?.url}`,className:"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden"}),e(s,{source:`${t.image?.url} 1024`,className:"feature-showcase__image feature-showcase__image--desktop l:hidden"}),a("div",{className:"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(c,{as:"h2",size:3,html:t?.title,className:"feature-showcase__title mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))}),e("div",{className:"feature-showcase__list flex gap-[16px]",children:u?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob?.url}`,className:"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden"}),e(s,{source:`${t.image?.url} 1024`,className:"feature-showcase__image feature-showcase__image--desktop l:hidden"}),a("div",{className:"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(c,{as:"h2",size:3,html:t?.title,className:"feature-showcase__title mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))})]})});r.displayName="FeatureShowcase";var T=w(r);export{T as default};
|
|
2
2
|
//# sourceMappingURL=FeatureShowcase.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FeatureShowcase/FeatureShowcase.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ data, className }, ref) => {\n const { datalist = [], datalists = [] } = data || {}\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: 'Feature Showcase',\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureShowcase\"\n className={cn(\n 'feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col',\n className\n )}\n >\n <div className=\"feature-showcase__list flex gap-[16px]\">\n {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n <div key={index} className=\"feature-showcase__item\">\n <div className=\"feature-showcase__card relative\">\n <Picture source={`${item.imageMob
|
|
5
|
-
"mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,qHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,yCACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ data, className }, ref) => {\n const { datalist = [], datalists = [] } = data || {}\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: 'Feature Showcase',\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureShowcase\"\n className={cn(\n 'feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col',\n className\n )}\n >\n <div className=\"feature-showcase__list flex gap-[16px]\">\n {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n <div key={index} className=\"feature-showcase__item\">\n <div className=\"feature-showcase__card relative\">\n <Picture source={`${item.imageMob?.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n <Picture source={`${item.image?.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n <div className=\"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n <Heading as={'h2'} size={3} html={item?.title} className=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n <Text\n as={'p'}\n html={item.desc}\n size={4}\n className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n </div>\n </div>\n ))}\n </div>\n <div className=\"feature-showcase__list flex gap-[16px]\">\n {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n <div key={index} className=\"feature-showcase__item\">\n <div className=\"feature-showcase__card relative\">\n <Picture source={`${item.imageMob?.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n <Picture source={`${item.image?.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n <div className=\"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n <Heading as={'h2'} size={3} html={item?.title} className=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n <Text\n as={'p'}\n html={item.desc}\n size={4}\n className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n </div>\n </div>\n ))}\n </div>\n </section>\n )\n})\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
|
|
5
|
+
"mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,qHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,yCACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,UAAU,GAAG,GAAI,UAAU,iGAAiG,EACrJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,OAAO,GAAG,QAAS,UAAU,oEAAoE,EAC1HnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,yCACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,UAAU,GAAG,GAAI,UAAU,iGAAiG,EACrJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,OAAO,GAAG,QAAS,UAAU,oEAAoE,EAC1HnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Picture", "Text", "Heading", "cn", "withLayout", "useExposure", "componentType", "componentName", "FeatureShowcase", "data", "className", "ref", "datalist", "datalists", "boxRef", "item", "index", "FeatureShowcase_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import k,{useImperativeHandle as I,useRef as N}from"react";import{Heading as s,Picture as T,Text as o}from"../../components/index.js";import{cn as x}from"../../helpers/utils.js";import{withLayout as v}from"../../shared/Styles.js";import{useExposure as y}from"../../hooks/useExposure.js";const w="image",F="image_text_feature",f=k.forwardRef(({data:g,className:n},u)=>{const{title:r,subtitle:i,pcImage:t,mobileImage:c,padImage:d,items:_=[],imagePosition:a="left",theme:h="light"}=g,m=N(null);return y(m,{componentType:w,componentName:F,componentTitle:r,componentDescription:i}),I(u,()=>m.current),p("section",{ref:m,"data-ui-component-id":"ImageTextFeature",className:x("image-text-feature",h==="dark"?"aiui-dark":"","flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]",n),children:[e(T,{source:`${t
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import k,{useImperativeHandle as I,useRef as N}from"react";import{Heading as s,Picture as T,Text as o}from"../../components/index.js";import{cn as x}from"../../helpers/utils.js";import{withLayout as v}from"../../shared/Styles.js";import{useExposure as y}from"../../hooks/useExposure.js";const w="image",F="image_text_feature",f=k.forwardRef(({data:g,className:n},u)=>{const{title:r,subtitle:i,pcImage:t,mobileImage:c,padImage:d,items:_=[],imagePosition:a="left",theme:h="light"}=g,m=N(null);return y(m,{componentType:w,componentName:F,componentTitle:r,componentDescription:i}),I(u,()=>m.current),p("section",{ref:m,"data-ui-component-id":"ImageTextFeature",className:x("image-text-feature",h==="dark"?"aiui-dark":"","flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]",n),children:[e(T,{source:`${t?.url}, ${d?.url||t?.url} 1024, ${c?.url||t?.url} 768`,alt:t?.alt,className:x("image-text-feature__image aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0",{"image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a==="left","image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]":a==="right"})}),p("div",{className:x("image-text-feature__content flex w-full flex-col items-start justify-center laptop:w-fit",{"order-1 laptop:order-2":a==="left","order-1":a==="right"}),children:[e(s,{size:4,html:r,as:"h3",className:"image-text-feature__title w-full text-left"}),i&&e(o,{size:4,html:i,as:"p",className:"image-text-feature__subtitle mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]"}),e("div",{className:"image-text-feature__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:_.map((l,b)=>p("div",{className:"image-text-feature__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[p("div",{className:"image-text-feature__item-header flex flex-row items-center gap-[8px]",children:[e("img",{src:l.icon,alt:"icon",className:"image-text-feature__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(s,{size:5,as:"h6",className:"image-text-feature__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:l.text})]}),e(o,{size:4,as:"p",html:l.desc,className:"image-text-feature__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},b))})]})]})});f.displayName="ImageTextFeature";var L=v(f);export{L as default};
|
|
2
2
|
//# sourceMappingURL=ImageTextFeature.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageTextFeature/ImageTextFeature.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { 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 { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, padImage, items = [], imagePosition = 'left', theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageTextFeature\"\n className={cn(\n 'image-text-feature',\n theme === 'dark' ? 'aiui-dark' : '',\n 'flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]',\n className\n )}\n >\n {/* \u56FE\u7247\u533A\u57DF */}\n <Picture\n source={`${pcImage
|
|
5
|
-
"mappings": "aAqCM,cAAAA,EAiCQ,QAAAC,MAjCR,oBApCN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACT,qBACAgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGa,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { 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 { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, padImage, items = [], imagePosition = 'left', theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageTextFeature\"\n className={cn(\n 'image-text-feature',\n theme === 'dark' ? 'aiui-dark' : '',\n 'flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]',\n className\n )}\n >\n {/* \u56FE\u7247\u533A\u57DF */}\n <Picture\n source={`${pcImage?.url}, ${padImage?.url || pcImage?.url} 1024, ${mobileImage?.url || pcImage?.url} 768`}\n alt={pcImage?.alt}\n className={cn('image-text-feature__image aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0', {\n 'image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'left',\n 'image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'right',\n })}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn('image-text-feature__content flex w-full flex-col items-start justify-center laptop:w-fit', {\n 'order-1 laptop:order-2': imagePosition === 'left',\n 'order-1': imagePosition === 'right',\n })}\n >\n {/* \u6807\u9898 */}\n <Heading size={4} html={title} as=\"h3\" className=\"image-text-feature__title w-full text-left\" />\n\n {/* \u526F\u6807\u9898 */}\n {subtitle && (\n <Text\n size={4}\n html={subtitle}\n as=\"p\"\n className=\"image-text-feature__subtitle mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]\"\n />\n )}\n\n {/* \u529F\u80FD\u5217\u8868 */}\n <div className=\"image-text-feature__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n {items.map((item: ImageTextFeatureItem, index: number) => (\n <div key={index} className=\"image-text-feature__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-text-feature__item-header flex flex-row items-center gap-[8px]\">\n <img\n src={item.icon}\n alt=\"icon\"\n className=\"image-text-feature__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\n as=\"h6\"\n className=\"image-text-feature__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-text-feature__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n})\n\nImageTextFeature.displayName = 'ImageTextFeature'\n\nexport default withLayout(ImageTextFeature)\n"],
|
|
5
|
+
"mappings": "aAqCM,cAAAA,EAiCQ,QAAAC,MAjCR,oBApCN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACT,qBACAgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGa,GAAS,GAAG,KAAKE,GAAU,KAAOF,GAAS,GAAG,UAAUC,GAAa,KAAOD,GAAS,GAAG,OACnG,IAAKA,GAAS,IACd,UAAWX,EAAG,kIAAmI,CAC/I,gGAAiGe,IAAkB,OACnH,kFAAmFA,IAAkB,OACvG,CAAC,EACH,EAGAtB,EAAC,OACC,UAAWO,EAAG,2FAA4F,CACxG,yBAA0Be,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAvB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMY,EAAO,GAAG,KAAK,UAAU,6CAA6C,EAG7FC,GACClB,EAACO,EAAA,CACC,KAAM,EACN,KAAMW,EACN,GAAG,IACH,UAAU,yHACZ,EAIFlB,EAAC,OAAI,UAAU,6LACZ,SAAAsB,EAAM,IAAI,CAACI,EAA4BC,IACtC1B,EAAC,OAAgB,UAAU,wEACzB,UAAAA,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,OACC,IAAK0B,EAAK,KACV,IAAI,OACJ,UAAU,4LACZ,EACA1B,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,2GAET,SAAAqB,EAAK,KACR,GACF,EACA1B,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMmB,EAAK,KACX,UAAU,uIACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDd,EAAiB,YAAc,mBAE/B,IAAOe,EAAQnB,EAAWI,CAAgB",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageTextFeature", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index", "ImageTextFeature_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import re,{useImperativeHandle as xe,useRef as h,useState as g,useEffect as ne}from"react";import{Heading as u,Picture as D,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as M}from"../../hooks/useIntersectionObserver.js";import{motion as q,AnimatePresence as B}from"framer-motion";const ge="image",ue="image_with_text",G=re.forwardRef(({data:J,className:K},Q)=>{const{title:_,subtitle:w,desc:v,descIcon:b,image:c,padImage:V,mobileImage:E,theme:k="dark",items:H=[],imagePosition:U,layout:X,mediaType:Y="image",datalist:m=[],video:S,padVideo:W,mobVideo:z,poster:Z,padPoster:ee,mobPoster:te,cols:f=1}=J,i=X||U||"left",y=h(null),N=h(null),T=h(null),I=h(null),[d,ie]=g(0),R=h([]),[A,ae]=g({left:0,width:0}),[n,oe]=g(""),[$,le]=g(""),[j,se]=g("");he(y,{componentType:ge,componentName:ue,componentTitle:_,componentDescription:w}),xe(Q,()=>y.current),ne(()=>{if(m.length>0){const t=R.current[d];if(t){const{offsetLeft:l,offsetWidth:x}=t;ae({left:l,width:x})}}},[d,m.length]),M(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),M(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}}),M(I,{once:!0,threshold:.1,callback:()=>{z?.url&&se(z.url)}});const me=(t,l)=>{ie(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,F=Y==="video",a=H.length>0,C=()=>{if(o&&m[d]){const t=m[d];return`${t.image
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import re,{useImperativeHandle as xe,useRef as h,useState as g,useEffect as ne}from"react";import{Heading as u,Picture as D,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as M}from"../../hooks/useIntersectionObserver.js";import{motion as q,AnimatePresence as B}from"framer-motion";const ge="image",ue="image_with_text",G=re.forwardRef(({data:J,className:K},Q)=>{const{title:_,subtitle:w,desc:v,descIcon:b,image:c,padImage:V,mobileImage:E,theme:k="dark",items:H=[],imagePosition:U,layout:X,mediaType:Y="image",datalist:m=[],video:S,padVideo:W,mobVideo:z,poster:Z,padPoster:ee,mobPoster:te,cols:f=1}=J,i=X||U||"left",y=h(null),N=h(null),T=h(null),I=h(null),[d,ie]=g(0),R=h([]),[A,ae]=g({left:0,width:0}),[n,oe]=g(""),[$,le]=g(""),[j,se]=g("");he(y,{componentType:ge,componentName:ue,componentTitle:_,componentDescription:w}),xe(Q,()=>y.current),ne(()=>{if(m.length>0){const t=R.current[d];if(t){const{offsetLeft:l,offsetWidth:x}=t;ae({left:l,width:x})}}},[d,m.length]),M(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),M(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}}),M(I,{once:!0,threshold:.1,callback:()=>{z?.url&&se(z.url)}});const me=(t,l)=>{ie(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,F=Y==="video",a=H.length>0,C=()=>{if(o&&m[d]){const t=m[d];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return c?`${c?.url},${V?.url||c?.url} 1024, ${E?.url||c?.url} 768`:""},O=()=>{if(o){const p=m[d],P=p.poster?.url||p.image?.url,de=p.padPoster?.url||p.imgPad?.url||P,pe=p.mobPoster?.url||p.imageMob?.url||P;return e(B,{mode:"wait",children:e(q.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:s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:P,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},p.video?.url||p.image?.url)})}const t=Z?.url||c?.url,l=ee?.url||V?.url||t,x=te?.url||E?.url||t;return s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:l,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return s("section",{ref:y,"data-ui-component-id":"ImageWithText",className:r("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!o,"flex-col":!o&&(i==="top"||i==="bottom"),"flex-col laptop:flex-row":!o&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":o,"image-with-text--dark text-white":k==="dark","image-with-text--light text-[#1f1f1f]":k==="light","aiui-dark":a&&k==="dark"},K),children:[o&&s("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{className:"image-with-text__header",children:[e(u,{as:"h3",size:4,html:_,className:"image-with-text__title"}),e(L,{as:"p",size:1,html:v,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:A.left,width:A.width}}),m.map((t,l)=>e("div",{ref:x=>{R.current[l]=x},onClick:x=>me(l,x),className:r("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",d===l?"image-with-text__tab--active text-black":"text-white"),children:e(u,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),!o&&s("div",{className:r("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":a,"order-1 laptop:order-2":a&&i==="left","order-1":a&&i==="right"||!a&&(i==="top"||i==="left"),"order-2":!a&&(i==="bottom"||i==="right")}),children:[e(u,{as:"h2",size:4,html:_,className:r("image-with-text__title",{"w-full text-left":a})}),w&&e(L,{as:"p",size:a?4:3,html:w,className:r("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!a,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":a})}),!a&&(v||b)&&s("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[b&&e("img",{src:b,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),v&&e(u,{as:"h4",size:5,html:v,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),a&&e("div",{className:r("image-with-text__items w-full grid gap-6",{"grid-cols-1":f===1,"grid-cols-2":f===2,"grid-cols-3":f===3,"grid-cols-4":f===4}),children:H.map((t,l)=>s("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[s("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[e(D,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(u,{size:5,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(L,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},l))})]}),e("div",{className:r("image-with-text__media-wrapper",{"order-1":!o&&(i==="top"||i==="left"),"order-2":!o&&(i==="bottom"||i==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":a,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="right","relative w-full flex-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]":o}),children:o?F?O():e(B,{mode:"wait",children:e(q.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(D,{source:C(),alt:m[d].image?.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},m[d].image?.url)}):F?O():e(D,{source:C(),className:r("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!a})})})]})});G.displayName="ImageWithText";var Ne=ce(G);export{Ne 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 } 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'\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 imagePosition,\n layout,\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n poster,\n padPoster,\n mobPoster,\n cols = 1,\n } = data\n\n // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n const effectiveLayout = layout || imagePosition || 'left'\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\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 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 // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (video?.url) {\n setLoadedDesktopVideoSrc(video.url)\n }\n },\n })\n\n // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(tabletVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (padVideo?.url) {\n setLoadedTabletVideoSrc(padVideo.url)\n }\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobVideo?.url) {\n setLoadedMobileVideoSrc(mobVideo.url)\n }\n },\n })\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\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 // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.mobPoster?.url || 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 overflow-hidden rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = poster?.url || image?.url\n const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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',\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 '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 'image-with-text--dark text-white': theme === 'dark',\n 'image-with-text--light text-[#1f1f1f]': theme === 'light',\n 'aiui-dark': hasItems && theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] 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 relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\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 justify-center', {\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full items-start laptop:w-fit': hasItems,\n // order\u63A7\u5236\n 'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n 'order-1':\n (hasItems && effectiveLayout === 'right') ||\n (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n 'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n })}\n >\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full text-left': hasItems,\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\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 h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\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 w-full grid gap-6', {\n 'grid-cols-1': cols === 1,\n 'grid-cols-2': cols === 2,\n 'grid-cols-3': cols === 3,\n 'grid-cols-4': cols === 4,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\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 -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n className={cn('image-with-text__media-wrapper', {\n // \u57FA\u7840\u6A21\u5F0F\n 'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n 'order-2': !isTabMode && (effectiveLayout === 'bottom' || 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 'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n 'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full flex-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-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\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\n source={getImageSource()}\n className={cn('image-with-text__image', {\n 'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n })}\n />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { 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 { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } 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 imagePosition,\n layout,\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n poster,\n padPoster,\n mobPoster,\n cols = 1,\n } = data\n\n // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n const effectiveLayout = layout || imagePosition || 'left'\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\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 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 // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (video?.url) {\n setLoadedDesktopVideoSrc(video.url)\n }\n },\n })\n\n // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(tabletVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (padVideo?.url) {\n setLoadedTabletVideoSrc(padVideo.url)\n }\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobVideo?.url) {\n setLoadedMobileVideoSrc(mobVideo.url)\n }\n },\n })\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\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 // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.mobPoster?.url || 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 overflow-hidden rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = poster?.url || image?.url\n const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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',\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 '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 'image-with-text--dark text-white': theme === 'dark',\n 'image-with-text--light text-[#1f1f1f]': theme === 'light',\n 'aiui-dark': hasItems && theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] 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 relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\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 justify-center', {\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full items-start laptop:w-fit': hasItems,\n // order\u63A7\u5236\n 'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n 'order-1':\n (hasItems && effectiveLayout === 'right') ||\n (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n 'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n })}\n >\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full text-left': hasItems,\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\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 h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\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 w-full grid gap-6', {\n 'grid-cols-1': cols === 1,\n 'grid-cols-2': cols === 2,\n 'grid-cols-3': cols === 3,\n 'grid-cols-4': cols === 4,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\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 -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n className={cn('image-with-text__media-wrapper', {\n // \u57FA\u7840\u6A21\u5F0F\n 'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n 'order-2': !isTabMode && (effectiveLayout === 'bottom' || 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 'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n 'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full flex-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-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\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\n source={getImageSource()}\n className={cn('image-with-text__image', {\n 'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n })}\n />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "cols", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as g,jsx as p,jsxs as e}from"react/jsx-runtime";import{Heading as n,Picture as d,Text as m}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as u}from"../../shared/Styles.js";const b=({title:l,desc:t,image:o,mobImage:a,video:c,mobVideo:s,className:i})=>e("div",{className:r("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f] text-white",i),children:[c&&s?e(g,{children:[p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:o?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:s?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(o||a)&&p(d,{source:o?.url||a?.url,alt:o?.alt||a?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),e("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[p(n,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),p(n,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),p(m,{size:2,html:t,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]}),x={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)=>x[t]?.[l]||"";function k({data:l,className:t}){const{title:o,items:a}=l;return e("section",{"data-ui-component-id":"ksp",className:r("ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]",t),children:[p(n,{as:"h1",size:4,html:o,className:"ksp-title text-left text-white laptop:text-center"}),p("div",{className:"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4",children:a.map((c,s)=>p(b,{...c,className:f(s,a.length)},s))})]})}var y=u(k);export{y as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|