@anker-in/headless-ui 1.0.26-alpha.1762512179373 → 1.0.26-alpha.1762767247024
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/HeroBanner/Countdown.d.ts +1 -1
- package/dist/cjs/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/Countdown.js.map +3 -3
- 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/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.js.map +2 -2
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.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/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- 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/HeroBanner/Countdown.d.ts +1 -1
- package/dist/esm/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/esm/biz-components/HeroBanner/Countdown.js.map +3 -3
- 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/Specs/dropdown.js +1 -1
- package/dist/esm/biz-components/Specs/dropdown.js.map +2 -2
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.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/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Ksp/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "Ksp", "data", "items"]
|
|
4
|
+
"sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className }: ImageCardProps) => {\n return (\n <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f] text-white', className)}>\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image h-full w-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n </div>\n )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n 4: {\n 0: 'col-span-2 laptop:col-span-6',\n 1: 'col-span-1 laptop:col-span-4',\n 2: 'col-span-1 laptop:col-span-4',\n 3: 'col-span-2 laptop:col-span-6',\n },\n 5: {\n 0: 'col-span-2 laptop:col-span-6',\n 1: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n 2: 'col-span-1 laptop:col-span-3',\n 3: 'col-span-1 laptop:col-span-4',\n 4: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n },\n 6: {\n 0: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n 1: 'col-span-1 laptop:col-span-3',\n 2: 'col-span-1 laptop:col-span-3',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n 4: 'col-span-1 laptop:col-span-3',\n 5: 'col-span-1 laptop:col-span-4',\n },\n 7: {\n 0: 'col-span-2 laptop:col-span-6',\n 1: 'col-span-1 laptop:col-span-4',\n 2: 'col-span-1 laptop:col-span-3',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n 4: 'col-span-1 laptop:col-span-3',\n 5: 'col-span-1 laptop:col-span-4',\n 6: 'col-span-2 laptop:col-span-6',\n },\n 8: {\n 0: 'col-span-2 laptop:col-span-6',\n 1: 'col-span-1 laptop:col-span-4',\n 2: 'col-span-1 laptop:col-span-4',\n 3: 'col-span-1 laptop:col-span-3',\n 4: 'col-span-1 laptop:col-span-3',\n 5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n 6: 'col-span-1 laptop:col-span-3',\n 7: 'col-span-1 laptop:col-span-4',\n },\n 9: {\n 0: 'col-span-2 laptop:col-span-3',\n 1: 'col-span-1 laptop:col-span-3',\n 2: 'col-span-1 laptop:col-span-4',\n 3: 'col-span-1 tablet:col-span-2 laptop:col-span-4',\n 4: 'col-span-1 laptop:col-span-3',\n 5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n 6: 'col-span-1 laptop:col-span-3',\n 7: 'col-span-1 laptop:col-span-3',\n 8: 'col-span-2 laptop:col-span-4',\n },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n * data={{\n * title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n * items: [\n * {\n * title: '\u9AD8\u6027\u80FD',\n * desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n * image: '/desktop.jpg',\n * mobImage: '/mobile.jpg'\n * },\n * // ... \u9700\u8981 4-9 \u4E2A\u9879\n * ]\n * }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n const { title, items } = data\n return (\n <section\n data-ui-component-id=\"ksp\"\n className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n <div className=\"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4\">\n {items.map((item, index) => (\n <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDQ,IAAAI,EAAA,6BApDRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA8C3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,CAAU,OAE1E,QAAC,OAAI,aAAW,MAAG,2EAA4EA,CAAS,EACrG,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GACF,EAQEM,EAAwD,CAC5D,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,gDACL,EACA,EAAG,CACD,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAN,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAa,CAAM,EAAID,EACzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,uFAAwFN,CAAS,EAE/G,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAa,EAAM,IAAI,CAACC,EAAML,OAChB,OAACV,EAAA,CAAuB,GAAGe,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOhB,KAAQ,cAAWkB,CAAG",
|
|
6
|
+
"names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var N=Object.create;var c=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)c(t,s,{get:e[s],enumerable:!0})},m=(t,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!g.call(t,r)&&r!==s&&c(t,r,{get:()=>e[r],enumerable:!(l=H(e,r))||l.enumerable});return t};var w=(t,e,s)=>(s=t!=null?N(P(t)):{},m(e||!t||!t.__esModule?c(s,"default",{value:t,enumerable:!0}):s,t)),T=t=>m(c({},"__esModule",{value:!0}),t);var E={};v(E,{default:()=>D});module.exports=T(E);var o=require("react/jsx-runtime"),a=w(require("react")),p=require("../../components/index.js"),n=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const y="image",L="product_hero",u=a.default.forwardRef(({data:t,className:e},s)=>{const{title:l,subtitle:r,ctaText:h,poster:b,mobPoster:x,ctaLink:_}=t,i=(0,a.useRef)(null);return(0,f.useExposure)(i,{componentType:y,componentName:L,componentTitle:l,componentDescription:r}),(0,a.useImperativeHandle)(s,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,n.cn)("product-hero flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",e),children:[(0,o.jsxs)("div",{className:"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(p.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(p.Heading,{as:"h4",size:2,html:r,className:"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(p.Text,{as:"p",size:2,html:r,className:"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(p.Button,{className:"product-hero__cta-button w-fit",children:h})})]}),(0,o.jsx)(p.Picture,{className:"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${b
|
|
1
|
+
"use strict";"use client";var N=Object.create;var c=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)c(t,s,{get:e[s],enumerable:!0})},m=(t,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!g.call(t,r)&&r!==s&&c(t,r,{get:()=>e[r],enumerable:!(l=H(e,r))||l.enumerable});return t};var w=(t,e,s)=>(s=t!=null?N(P(t)):{},m(e||!t||!t.__esModule?c(s,"default",{value:t,enumerable:!0}):s,t)),T=t=>m(c({},"__esModule",{value:!0}),t);var E={};v(E,{default:()=>D});module.exports=T(E);var o=require("react/jsx-runtime"),a=w(require("react")),p=require("../../components/index.js"),n=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const y="image",L="product_hero",u=a.default.forwardRef(({data:t,className:e},s)=>{const{title:l,subtitle:r,ctaText:h,poster:b,mobPoster:x,ctaLink:_}=t,i=(0,a.useRef)(null);return(0,f.useExposure)(i,{componentType:y,componentName:L,componentTitle:l,componentDescription:r}),(0,a.useImperativeHandle)(s,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,n.cn)("product-hero flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",e),children:[(0,o.jsxs)("div",{className:"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(p.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(p.Heading,{as:"h4",size:2,html:r,className:"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(p.Text,{as:"p",size:2,html:r,className:"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(p.Button,{className:"product-hero__cta-button w-fit",children:h})})]}),(0,o.jsx)(p.Picture,{className:"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${b?.url}, ${x?.url} 768`})]})});u.displayName="ProductHero";var D=(0,d.withLayout)(u);
|
|
2
2
|
//# sourceMappingURL=ProductHero.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'product-hero flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n className\n )}\n >\n <div className=\"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n <div className=\"product-hero__text\">\n <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n />\n </div>\n <a href={ctaLink} className=\"product-hero__cta-link\">\n <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n </a>\n </div>\n <Picture\n className=\"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n source={`${poster
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAlCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,oIACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,KACA,OAAC,KAAE,KAAMI,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GACF,KACA,OAAC,WACC,UAAU,iHACV,OAAQ,GAAGC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'product-hero flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n className\n )}\n >\n <div className=\"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n <div className=\"product-hero__text\">\n <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n />\n </div>\n <a href={ctaLink} className=\"product-hero__cta-link\">\n <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n </a>\n </div>\n <Picture\n className=\"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n source={`${poster?.url}, ${mobPoster?.url} 768`}\n />\n </section>\n )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAlCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,oIACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,KACA,OAAC,KAAE,KAAMI,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GACF,KACA,OAAC,WACC,UAAU,iHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OAC3C,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
|
|
6
6
|
"names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "boxRef"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(e,n)=>{for(var r in n)p(e,r,{get:n[r],enumerable:!0})},D=(e,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of m(n))!v.call(e,t)&&t!==r&&p(e,t,{get:()=>n[t],enumerable:!(s=x(n,t))||s.enumerable});return e};var k=e=>D(p({},"__esModule",{value:!0}),e);var C={};y(C,{default:()=>
|
|
2
|
-
${o?.handle===n?.handle?"bg-[#EAEAEC]":""}`,children:o?.name},a)})})})};var E
|
|
1
|
+
"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(e,n)=>{for(var r in n)p(e,r,{get:n[r],enumerable:!0})},D=(e,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of m(n))!v.call(e,t)&&t!==r&&p(e,t,{get:()=>n[t],enumerable:!(s=x(n,t))||s.enumerable});return e};var k=e=>D(p({},"__esModule",{value:!0}),e);var C={};y(C,{default:()=>w});module.exports=k(C);var c=require("react/jsx-runtime"),l=require("react");const g="openDropDown",E=({index:e,active:n,list:r,setActive:s,setVisible:t,visible:u,filterActive:i})=>{const f=(0,l.useRef)(null);(0,l.useEffect)(()=>{const o=a=>{const d=a?.target?.getAttribute?.("class");!f?.current?.contains(a?.target)&&!d?.includes(g)&&t({...u,[e]:!1})};return document.addEventListener("click",o),()=>document.removeEventListener("click",o)},[]);const h=(0,l.useMemo)(()=>{const o=Object.keys(i||{});return r?.filter(a=>!o?.find(b=>i?.[b]?.handle===a?.handle))},[i,r]);return(0,c.jsx)("div",{ref:f,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-auto rounded-lg bg-[#F5F5F7] ${u?.[e]?"block":"hidden"}`,children:(0,c.jsx)("div",{className:"m-0 box-border h-full flex-1 overflow-hidden p-0 [&:last-child]:border-r-0",children:h?.map((o,a)=>{const d=o?.sku||o?.variants?.[0]?.sku;return(0,c.jsx)("div",{onClick:()=>{s({...n,[e]:{sku:d,name:o?.name,handle:o?.handle}}),t({...u,[e]:!1})},title:o?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
|
|
2
|
+
${o?.handle===n?.handle?"bg-[#EAEAEC]":""}`,children:o?.name},a)})})})};var w=E;
|
|
3
3
|
//# sourceMappingURL=dropdown.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Specs/dropdown.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n index: number\n active: any\n list: any\n setActive: any\n setVisible: any\n visible: any\n filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n const dropDownRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: any) => {\n const isDel = event?.target?.getAttribute?.('class')\n const isContainer = !dropDownRef?.current?.contains(event?.target)\n if (isContainer && !isDel?.includes(clickContent)) {\n setVisible({ ...visible, [index]: false })\n }\n }\n document.addEventListener('click', handleClickOutside)\n return () => document.removeEventListener('click', handleClickOutside)\n }, [])\n\n const handleList = useMemo(() => {\n const activeIndex = Object.keys(filterActive || {})\n return list?.filter((item: { handle: any }) => {\n const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n return !currentIndex\n })\n }, [filterActive, list])\n\n return (\n <div\n ref={dropDownRef}\n className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8CY,IAAAI,EAAA,6BA9CZC,EAA2C,iBAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,KAAc,UAAuB,IAAI,KAE/C,aAAU,IAAM,CACd,MAAMC,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,KAAa,WAAQ,IAAM,CAC/B,MAAMC,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,SACE,OAAC,OACC,IAAKK,EACL,UAAW,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n index: number\n active: any\n list: any\n setActive: any\n setVisible: any\n visible: any\n filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n const dropDownRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: any) => {\n const isDel = event?.target?.getAttribute?.('class')\n const isContainer = !dropDownRef?.current?.contains(event?.target)\n if (isContainer && !isDel?.includes(clickContent)) {\n setVisible({ ...visible, [index]: false })\n }\n }\n document.addEventListener('click', handleClickOutside)\n return () => document.removeEventListener('click', handleClickOutside)\n }, [])\n\n const handleList = useMemo(() => {\n const activeIndex = Object.keys(filterActive || {})\n return list?.filter((item: { handle: any }) => {\n const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n return !currentIndex\n })\n }, [filterActive, list])\n\n return (\n <div\n ref={dropDownRef}\n className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-auto rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n >\n <div className={'m-0 box-border h-full flex-1 overflow-hidden p-0 [&:last-child]:border-r-0'}>\n {handleList?.map((item: any, id: number) => {\n const currentSku = item?.sku || item?.variants?.[0]?.sku\n return (\n <div\n key={id}\n onClick={() => {\n setActive({\n ...active,\n [index]: {\n sku: currentSku,\n name: item?.name,\n handle: item?.handle,\n },\n })\n setVisible({ ...visible, [index]: false })\n }}\n title={item?.name}\n className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n >\n {item?.name}\n </div>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default DropDown\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8CY,IAAAI,EAAA,6BA9CZC,EAA2C,iBAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,KAAc,UAAuB,IAAI,KAE/C,aAAU,IAAM,CACd,MAAMC,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,KAAa,WAAQ,IAAM,CAC/B,MAAMC,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,SACE,OAAC,OACC,IAAKK,EACL,UAAW,yGAAyGF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAEzJ,mBAAC,OAAI,UAAW,6EACb,SAAAW,GAAY,IAAI,CAACE,EAAWE,IAAe,CAC1C,MAAMC,EAAaH,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,SACE,OAAC,OAEC,QAAS,IAAM,CACbV,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKgB,EACL,KAAMH,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFE,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAOrB,EAAQK",
|
|
6
6
|
"names": ["dropdown_exports", "__export", "dropdown_default", "__toCommonJS", "import_jsx_runtime", "import_react", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "id", "currentSku"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var O=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var Q=(l,n)=>{for(var r in n)v(l,r,{get:n[r],enumerable:!0})},F=(l,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let b of $(n))!z.call(l,b)&&b!==r&&v(l,b,{get:()=>n[b],enumerable:!(u=V(n,b))||u.enumerable});return l};var S=(l,n,r)=>(r=l!=null?O(q(l)):{},F(n||!l||!l.__esModule?v(r,"default",{value:l,enumerable:!0}):r,l)),G=l=>F(v({},"__esModule",{value:!0}),l);var K={};Q(K,{default:()=>J});module.exports=G(K);var e=require("react/jsx-runtime"),A=S(require("./dropdown")),L=require("../AiuiProvider/index.js"),T=require("react-responsive"),f=require("react"),H=require("../../shared/Styles.js"),R=require("../ShelfDisplay/shelfDisplay.js"),d=require("../../components/index.js"),g=S(require("react"));const j=g.default.forwardRef((l,n)=>{const{data:r,buildData:u,onChange:b}=l||{},y=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),[i,h]=(0,f.useState)({}),[w,N]=(0,f.useState)({}),D=(0,g.useRef)(null),{locale:P="us"}=(0,L.useAiuiContext)(),{LeftMenu:E,RightMenu:C,DefaultSelectMenu:k}=(0,f.useMemo)(()=>r?.data||{},[r?.data]),_=t=>{try{const o=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(o)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},I=(t,s)=>{const o=C?.menus?.find?.(p=>p?.handle===t?.handle),a=t?.variants?.find?.(p=>p?.sku===t?.sku||o?.sku),c=a?.coupons?.[0],{price:m,basePrice:x}=(0,R.formatVariantPrice)({locale:P||"us",amount:c?c?.variant_price4wscode:a?.price,baseAmount:c?a?.price:0,currencyCode:t?.price?.currencyCode||"USD"});return(0,e.jsxs)("div",{className:"box-border
|
|
1
|
+
"use strict";"use client";var O=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var Q=(l,n)=>{for(var r in n)v(l,r,{get:n[r],enumerable:!0})},F=(l,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let b of $(n))!z.call(l,b)&&b!==r&&v(l,b,{get:()=>n[b],enumerable:!(u=V(n,b))||u.enumerable});return l};var S=(l,n,r)=>(r=l!=null?O(q(l)):{},F(n||!l||!l.__esModule?v(r,"default",{value:l,enumerable:!0}):r,l)),G=l=>F(v({},"__esModule",{value:!0}),l);var K={};Q(K,{default:()=>J});module.exports=G(K);var e=require("react/jsx-runtime"),A=S(require("./dropdown")),L=require("../AiuiProvider/index.js"),T=require("react-responsive"),f=require("react"),H=require("../../shared/Styles.js"),R=require("../ShelfDisplay/shelfDisplay.js"),d=require("../../components/index.js"),g=S(require("react"));const j=g.default.forwardRef((l,n)=>{const{data:r,buildData:u,onChange:b}=l||{},y=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),[i,h]=(0,f.useState)({}),[w,N]=(0,f.useState)({}),D=(0,g.useRef)(null),{locale:P="us"}=(0,L.useAiuiContext)(),{LeftMenu:E,RightMenu:C,DefaultSelectMenu:k}=(0,f.useMemo)(()=>r?.data||{},[r?.data]),_=t=>{try{const o=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(o)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},I=(t,s)=>{const o=C?.menus?.find?.(p=>p?.handle===t?.handle),a=t?.variants?.find?.(p=>p?.sku===t?.sku||o?.sku),c=a?.coupons?.[0],{price:m,basePrice:x}=(0,R.formatVariantPrice)({locale:P||"us",amount:c?c?.variant_price4wscode:a?.price,baseAmount:c?a?.price:0,currencyCode:t?.price?.currencyCode||"USD"});return(0,e.jsxs)("div",{className:"box-border specs-sku-node-wrap",children:[(0,e.jsxs)(d.Text,{className:"relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text",onClick:()=>N({...w,[s]:!w?.[s]}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title",title:i?.[s]?.name,children:i?.[s]?.name||""}),(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})})]}),(0,e.jsx)(A.default,{index:s,list:u?.products,active:i,filterActive:i,setActive:h,visible:w,setVisible:N})]}),(0,e.jsx)("div",{className:"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]",children:(0,e.jsx)(d.Picture,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover"})}),a?.availableForSale?(0,e.jsxs)("div",{className:"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl",children:[(0,e.jsx)("div",{className:"text-[#1D1D1F] specs-sku-node-price",children:m||""}),x&&(0,e.jsx)("div",{className:"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price",children:x})]}):!1,k?.buttonText?(0,e.jsx)(d.Button,{onClick:()=>b?.(t),className:"specs-sku-node-button",children:k?.buttonText}):null]})},U=t=>{if(t)return t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(d.Picture,{source:t?.imgUrl,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:_(t)?(0,e.jsx)(d.Picture,{source:t,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:t||""}})})},M=t=>t.map((s,o)=>{const a=o===0;return(0,e.jsxs)("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col specs-product-node-wrap",children:[(0,e.jsx)(d.Heading,{as:"h3",html:s||"",className:"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title"}),(0,e.jsx)("div",{className:"col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body",children:Object.keys(i)?.map?.(c=>{const m=i?.[c],x=C?.menus?.find?.(p=>p?.handle===m?.handle)?.subTitle;return U(x?.[s])})})]},s)}),B=t=>{if(!i)return;const{subTitle:s,isProduct:o}=t;return o?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product",children:[t?.title&&(0,e.jsx)(d.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:"col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body",children:Object.keys(i)?.map((a,c)=>{const m=i?.[a],x=u?.products?.find?.(p=>p?.handle===m?.handle);return(0,e.jsx)("div",{children:I({...x,sku:m?.sku,item:a},c)},a)})})]}),s?.length?M(s):null]}):M(s)};return(0,g.useImperativeHandle)(n,()=>D.current),(0,f.useEffect)(()=>{if(!u?.products?.length)return;const t=k?.sku?.split?.(",")||[];let s={};t?.forEach?.((o,a)=>{const c=u?.products?.find?.(m=>{if(m?.variants?.find?.(p=>p?.sku===o))return!0});c&&(s={...s,[a]:{sku:o,name:c?.name,handle:c?.handle}})}),h(s)},[u]),(0,f.useEffect)(()=>{if(y){const t=Object.keys(i||{});if(t?.length>2){const s=t?.slice?.(0,2);let o={};s?.forEach?.(a=>{o={...o,[a]:i?.[a]}}),h(o)}}},[y]),(0,e.jsx)("div",{className:"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper",ref:D,children:E?.data?(0,e.jsx)("div",{className:"box-border w-full overflow-hidden specs-wrapper-content",children:E?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item",children:B(t)},s))}):null})});j.displayName="Specs";var J=(0,H.withLayout)(j);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Specs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n const { data, buildData, onChange } = page || {}\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us' } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n return (\n <div className=\"box-border overflow-hidden specs-sku-node-wrap\">\n <Text\n className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n title={active?.[index]?.name}\n >\n {active?.[index]?.name || ''}\n </div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n <DropDown\n index={index}\n list={buildData?.products}\n active={active}\n filterActive={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n {findSku?.availableForSale ? (\n <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n {basePrice && (\n <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n {basePrice}\n </div>\n )}\n </div>\n ) : (\n false\n )}\n {DefaultSelectMenu?.buttonText ? (\n <Button onClick={() => onChange?.(product)} className=\"specs-sku-node-button\">\n {DefaultSelectMenu?.buttonText}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (!v) return\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n />\n <div\n className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n >\n {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n <div\n className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n })}\n </div>\n </div>\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n let currentActive = {}\n skus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name,\n handle: findData?.handle,\n },\n }\n }\n })\n setActive(currentActive)\n }, [buildData])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDU,IAAAI,EAAA,6BAlDVC,EAAqB,yBACrBC,EAA+B,oCAC/BC,EAA8B,4BAC9BC,EAA6C,iBAC7CC,EAA2B,kCAC3BC,EAAmC,2CACnCC,EAA0D,qCAC1DH,EAAmD,oBAEnD,MAAMI,EAAQ,EAAAC,QAAM,WAAgC,CAACC,EAAWC,IAAQ,CACtE,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,CAAS,EAAIJ,GAAQ,CAAC,EAEzCK,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD,CAACC,EAAQC,CAAS,KAAI,YAAc,CAAC,CAAC,EACtC,CAACC,EAAeC,CAAgB,KAAI,YAAqC,CAAC,CAAC,EAE3EC,KAAW,UAAuB,IAAI,EAEtC,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEnC,CAAE,SAAAC,EAAU,UAAAC,EAAW,kBAAAC,CAAkB,KAAI,WAAQ,IAAMZ,GAAM,MAAQ,CAAC,EAAG,CAACA,GAAM,IAAI,CAAC,EAEzFa,EAAcC,GAAoB,CACtC,GAAI,CAEF,MAAMC,EADM,IAAI,IAAID,CAAO,EACV,SAAS,YAAY,EACtC,MAAO,0CAA0C,KAAKC,CAAI,CAC5D,MAAY,CAEV,MAAO,2CAA2C,KAAKD,CAAO,CAChE,CACF,EAEME,EAAU,CAACC,EAAcC,IAAkB,CAC/C,MAAMC,EAAkBR,GAAW,OAAO,OAAQS,GAAcA,GAAM,SAAWH,GAAS,MAAM,EAC1FI,EAAUJ,GAAS,UAAU,OAAQG,GAAcA,GAAM,MAAQH,GAAS,KAAOE,GAAiB,GAAG,EACrGG,EAASD,GAAS,UAAU,CAAC,EAC7B,CAAE,MAAAE,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQf,GAAU,KAClB,OAAQa,EAASA,GAAQ,qBAAuBD,GAAS,MACzD,WAAYC,EAASD,GAAS,MAAQ,EACtC,aAAcJ,GAAS,OAAO,cAAgB,KAChD,CAAC,EACD,SACE,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n const { data, buildData, onChange } = page || {}\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us' } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n return (\n <div className=\"box-border specs-sku-node-wrap\">\n <Text\n className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n title={active?.[index]?.name}\n >\n {active?.[index]?.name || ''}\n </div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n <DropDown\n index={index}\n list={buildData?.products}\n active={active}\n filterActive={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n {findSku?.availableForSale ? (\n <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n {basePrice && (\n <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n {basePrice}\n </div>\n )}\n </div>\n ) : (\n false\n )}\n {DefaultSelectMenu?.buttonText ? (\n <Button onClick={() => onChange?.(product)} className=\"specs-sku-node-button\">\n {DefaultSelectMenu?.buttonText}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (!v) return\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n />\n <div\n className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`box-border grid w-full cursor-pointer grid-cols-3 border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n >\n {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n <div\n className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n })}\n </div>\n </div>\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n let currentActive = {}\n skus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name,\n handle: findData?.handle,\n },\n }\n }\n })\n setActive(currentActive)\n }, [buildData])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
|
|
7
7
|
}
|
|
@@ -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,4 +1,4 @@
|
|
|
1
|
-
"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,a)=>{for(var o in a)n(e,o,{get:a[o],enumerable:!0})},
|
|
1
|
+
"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,a)=>{for(var o in a)n(e,o,{get:a[o],enumerable:!0})},p=(e,a,o,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of d(a))!f.call(e,r)&&r!==o&&n(e,r,{get:()=>a[r],enumerable:!(s=h(a,r))||s.enumerable});return e};var y=(e,a,o)=>(o=e!=null?c(k(e)):{},p(a||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),P=e=>p(n({},"__esModule",{value:!0}),e);var L={};b(L,{DarkTheme:()=>g,LightTheme:()=>u,MultiBanner:()=>B,WithPadImage:()=>S,WithPlayButton:()=>W,WithoutSecondaryButton:()=>w,default:()=>A});module.exports=P(L);var i=require("react/jsx-runtime"),N=require("react"),m=y(require("../biz-components/HeroBanner/HeroBanner.js"));const x={title:"Biz-Components/HeroBanner",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
|
|
9
9
|
- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
|
|
10
|
-
`}}},tags:["autodocs"]};var
|
|
10
|
+
`}}},tags:["autodocs"]};var A=x;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",D="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",l="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",u={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},g={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},mobileImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},B=()=>(0,i.jsxs)("div",{className:"flex flex-col",children:[(0,i.jsx)(m.default,{data:{...u.args.data,size:"sm"}}),(0,i.jsx)(m.default,{data:{...g.args.data,size:"sm"}})]}),w={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},S={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},W={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",playVideoButton:{text:"Shop Now"},videoConfig:{videoUrl:"https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4",setVideoUrl:e=>{console.log("setVideoUrl",e)}},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};
|
|
11
11
|
//# sourceMappingURL=HeroBanner.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/HeroBanner.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPadImage: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPlayButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n playVideoButton: {\n text: 'Shop Now',\n },\n videoConfig: {\n videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n setVideoUrl: (v: string) => {\n console.log('setVideoUrl', v)\n },\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,gBAAAC,EAAA,iBAAAC,EAAA,mBAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,
|
|
6
|
-
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "WithPadImage", "WithPlayButton", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground", "v"]
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n endDate: '2025-11-15T03:32:00.000Z',\n endDate_tz: 'America/Sao_Paulo',\n dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPadImage: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPlayButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n playVideoButton: {\n text: 'Shop Now',\n },\n videoConfig: {\n videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n setVideoUrl: (v: string) => {\n console.log('setVideoUrl', v)\n },\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,gBAAAC,EAAA,iBAAAC,EAAA,mBAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GAkHI,IAAAU,EAAA,6BAjHJC,EAAkB,iBAClBC,EAAuB,yDAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQK,EAGf,MAAME,EACJ,gJAEIC,EACJ,gJAEIC,EACJ,2GAEWd,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKY,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,UAAW,sBACX,cAAe,CACb,KAAM,WACN,KAAM,wBACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,0BACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,EACA,QAAS,2BACT,WAAY,oBACZ,WAAY,8DACd,CACF,CACF,EAEab,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKe,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEab,EAAc,OAEvB,QAAC,OAAI,UAAU,gBAEb,oBAAC,EAAAU,QAAA,CAAW,KAAM,CAAE,GAAGX,EAAY,KAAM,KAAM,KAAM,IAAK,EAAG,KAE7D,OAAC,EAAAW,QAAA,CAAW,KAAM,CAAE,GAAGZ,EAAW,KAAM,KAAM,KAAM,IAAK,EAAG,GAC9D,EAISK,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKQ,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaV,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAK,8CACL,IAAK,qBACL,aAAcU,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaT,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAK,8CACL,IAAK,qBACL,aAAcS,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,gBAAiB,CACf,KAAM,UACR,EACA,YAAa,CACX,SAAU,4EACV,YAAcG,GAAc,CAC1B,QAAQ,IAAI,cAAeA,CAAC,CAC9B,CACF,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF",
|
|
6
|
+
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "WithPadImage", "WithPlayButton", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground", "v"]
|
|
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
|