@anker-in/headless-ui 0.0.27-alpha.64 → 0.0.27-alpha.66
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/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +1 -1
- package/dist/cjs/biz-components/Marquee/index.js +1 -1
- package/dist/cjs/biz-components/Marquee/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +2 -0
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +3 -3
- package/dist/cjs/biz-components/SwiperBox/index.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/stories/mediaplayerMulti.stories.js +1 -1
- package/dist/cjs/stories/mediaplayerMulti.stories.js.map +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +1 -1
- package/dist/esm/biz-components/Marquee/index.js +1 -1
- package/dist/esm/biz-components/Marquee/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +2 -0
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/SwiperBox/index.js +1 -1
- package/dist/esm/biz-components/SwiperBox/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +2 -2
- package/dist/esm/libs.d.js +1 -1
- package/dist/esm/libs.d.js.map +1 -1
- package/dist/esm/stories/mediaplayerMulti.stories.js +1 -1
- package/dist/esm/stories/mediaplayerMulti.stories.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var l in t)r(e,l,{get:t[l],enumerable:!0})},c=(e,t,l,
|
|
1
|
+
"use strict";"use client";var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var l in t)r(e,l,{get:t[l],enumerable:!0})},c=(e,t,l,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of v(t))!f.call(e,p)&&p!==l&&r(e,p,{get:()=>t[p],enumerable:!(o=g(t,p))||o.enumerable});return e};var y=(e,t,l)=>(l=e!=null?u(x(e)):{},c(t||!e||!e.__esModule?r(l,"default",{value:e,enumerable:!0}):l,e)),k=e=>c(r({},"__esModule",{value:!0}),e);var w={};b(w,{default:()=>h});module.exports=k(w);var a=require("react/jsx-runtime"),j=require("react"),s=require("../../helpers/utils.js"),i=y(require("../../components/picture.js")),n=require("../../shared/Styles.js");const N=({data:{items:e=[]},itemShape:t="square",className:l=""})=>(0,a.jsx)("div",{className:(0,s.cn)("brand-equity-wrapper w-full",l),children:(0,a.jsx)("div",{className:(0,s.cn)("grid gap-3","tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:grid-cols-10"),children:e.map((o,p)=>(0,a.jsxs)("div",{className:(0,s.cn)("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(p)},t==="round"?"rounded-2xl":"rounded-none"),children:[(0,a.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,a.jsx)("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:o.title}),o.type==="avatar"?(0,a.jsx)("div",{className:"flex -space-x-2",children:o?.avatarList?.map((d,m)=>(0,a.jsx)("div",{className:(0,s.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,a.jsx)(i.default,{source:d.avatar.url,alt:d.avatar?.alt,className:"size-full object-cover"})},m))}):(0,a.jsx)(i.default,{className:"lg-desktop:size-[36px] size-[30px] object-cover",source:o.icon?.url,alt:o.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,a.jsx)("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:o.description})]},p))})});var h=(0,n.withStyles)(N);
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data: { items = [] }, itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid gap-3', 'tablet:grid-cols-2 grid-cols-1', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data: { items = [] }, itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid gap-3', 'tablet:grid-cols-2 grid-cols-1', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6 desktop:gap-16 gap-12',\n 'laptop:col-span-3 lg-desktop:p-8',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {item.title}\n </h3>\n {item.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:size-[36px] size-[30px] object-cover\"\n source={item.icon?.url}\n alt={item.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4BY,IAAAI,EAAA,6BA3BZC,EAAkB,iBAElBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAK3B,MAAMC,EAA0C,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,CAAE,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,OAE1G,OAAC,OAAI,aAAW,MAAG,8BAA+BA,CAAS,EACzD,mBAAC,OAAI,aAAW,MAAG,aAAc,iCAAkC,kCAAkC,EAClG,SAAAF,EAAM,IAAI,CAACG,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAH,IAAc,QAAU,cAAgB,cAC1C,EAEA,qBAAC,OAAI,UAAU,uEACb,oBAAC,MAAG,UAAU,mGACX,SAAAE,EAAK,MACR,EACCA,EAAK,OAAS,YACb,OAAC,OAAI,UAAU,kBACZ,SAAAA,GAAM,YAAY,IAAI,CAACA,EAAuBC,OAC7C,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAC,QAAA,CAAQ,OAAQF,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,KAEA,OAAC,EAAAC,QAAA,CACC,UAAU,kDACV,OAAQF,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,KACA,OAAC,KAAE,UAAU,+FACV,SAAAA,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,EAIJ,IAAOZ,KAAQ,cAAWO,CAAW",
|
|
6
6
|
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "className", "item", "index", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var h=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var N=(e,r)=>{for(var o in r)m(e,o,{get:r[o],enumerable:!0})},v=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of C(r))!w.call(e,a)&&a!==o&&m(e,a,{get:()=>r[a],enumerable:!(n=y(r,a))||n.enumerable});return e};var u=(e,r,o)=>(o=e!=null?h(F(e)):{},v(r||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),E=e=>v(m({},"__esModule",{value:!0}),e);var M={};N(M,{default:()=>R});module.exports=E(M);var t=require("react/jsx-runtime"),c=require("react"),i=require("../../helpers/utils.js"),d=u(require("../../components/picture.js")),x=require("../../shared/Styles.js"),b=u(require("../Title/index.js")),p=u(require("./SwiperCategory.js")),g=require("@gsap/react"),f=u(require("gsap"));const k=(e,r)=>{const o=[];for(let n=0;n<e.length;n+=r)o.push(e.slice(n,n+r));return o},I=({data:e,configuration:r})=>{const o=(0,c.useRef)(null),n=(0,c.useRef)(null);return(0,g.useGSAP)(()=>{const a=o.current,s=n.current;if(!a||!s)return;const l=f.default.to(s,{scale:1.1,duration:.3,ease:"power1.out",paused:!0});a.addEventListener("mouseenter",()=>l.play()),a.addEventListener("mouseleave",()=>l.reverse())},{scope:o,dependencies:[],revertOnUpdate:!1}),(0,t.jsxs)("div",{ref:o,className:(0,i.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{ref:n,children:(0,t.jsx)(d.default,{source:e?.image?.url||e?.image,className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})}),(0,t.jsx)("p",{className:"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold",children:e?.name})]})},S=({data:e,configuration:r})=>(0,t.jsxs)("div",{className:(0,i.cn)("box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]","cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)(d.default,{className:"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image}),(0,t.jsx)("p",{className:"flex-1 truncate text-center text-sm font-semibold",children:e?.name})]},`${e?.name}`),j=({data:e,configuration:r})=>{const o=(0,c.useRef)(null),n=(0,c.useRef)(null);return(0,g.useGSAP)(()=>{const a=o.current,s=n.current;if(!a||!s)return;const l=f.default.to(s,{scale:1.1,duration:.3,ease:"power1.out",paused:!0});a.addEventListener("mouseenter",()=>l.play()),a.addEventListener("mouseleave",()=>l.reverse())},{scope:o,dependencies:[],revertOnUpdate:!1}),(0,t.jsxs)("div",{ref:o,className:(0,i.cn)("box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{className:"size-full",ref:n,children:(0,t.jsx)(d.default,{className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]})},_=({data:e,configuration:r,index:o})=>(0,t.jsxs)("div",{className:(0,i.cn)("box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]","cursor-pointer p-4 hover:bg-[#FFFFFF]",o===0?"row-span-2 h-[252px]":"h-[120px]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,i.cn)(o===0?"max-h-[146px]":"max-h-[72px]"),children:(0,t.jsx)(d.default,{className:(0,i.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"),source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"line-clamp-2 text-center text-sm font-semibold",children:e?.name})]}),A=({data:e,configuration:r})=>(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((o,n)=>(0,t.jsx)(S,{data:o,configuration:r},n))}),D=({data:e,configuration:r})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"mx-auto flex w-full gap-4",children:e?.map((o,n)=>(0,t.jsx)(j,{data:o,configuration:r},n))})}),(0,t.jsx)("div",{className:"tablet:hidden block",children:(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((o,n)=>(0,t.jsx)(_,{index:n,data:o,configuration:r},n))})})]}),L=({data:e,buildData:r,className:o="",key:n})=>{const a=e?.isShowSelect?e?.products:e?.productData,s=a?.length<=5;return(0,t.jsxs)("div",{className:(0,i.cn)("w-full",o),children:[e?.title&&(0,t.jsx)(b.default,{data:{title:e?.title}}),s?(0,t.jsx)(D,{data:a,configuration:{shape:e?.shape}}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(p.default,{id:`Category${n}`,Slide:I,data:{list:a,configuration:{shape:e?.shape}}})}),(0,t.jsx)("div",{className:"tablet:hidden block overflow-hidden",children:(0,t.jsx)(p.default,{id:`Category1${n}`,Slide:A,data:{list:k(a,6),configuration:{shape:e?.shape}}})})]})]})};var R=(0,x.withStyles)(L);
|
|
1
|
+
"use strict";"use client";var h=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var N=(e,r)=>{for(var o in r)m(e,o,{get:r[o],enumerable:!0})},v=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of C(r))!w.call(e,a)&&a!==o&&m(e,a,{get:()=>r[a],enumerable:!(n=y(r,a))||n.enumerable});return e};var u=(e,r,o)=>(o=e!=null?h(F(e)):{},v(r||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),E=e=>v(m({},"__esModule",{value:!0}),e);var M={};N(M,{default:()=>R});module.exports=E(M);var t=require("react/jsx-runtime"),c=require("react"),i=require("../../helpers/utils.js"),d=u(require("../../components/picture.js")),x=require("../../shared/Styles.js"),b=u(require("../Title/index.js")),p=u(require("./SwiperCategory.js")),g=require("@gsap/react"),f=u(require("gsap/dist/gsap.js"));const k=(e,r)=>{const o=[];for(let n=0;n<e.length;n+=r)o.push(e.slice(n,n+r));return o},I=({data:e,configuration:r})=>{const o=(0,c.useRef)(null),n=(0,c.useRef)(null);return(0,g.useGSAP)(()=>{const a=o.current,s=n.current;if(!a||!s)return;const l=f.default.to(s,{scale:1.1,duration:.3,ease:"power1.out",paused:!0});a.addEventListener("mouseenter",()=>l.play()),a.addEventListener("mouseleave",()=>l.reverse())},{scope:o,dependencies:[],revertOnUpdate:!1}),(0,t.jsxs)("div",{ref:o,className:(0,i.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{ref:n,children:(0,t.jsx)(d.default,{source:e?.image?.url||e?.image,className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})}),(0,t.jsx)("p",{className:"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold",children:e?.name})]})},S=({data:e,configuration:r})=>(0,t.jsxs)("div",{className:(0,i.cn)("box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]","cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)(d.default,{className:"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image}),(0,t.jsx)("p",{className:"flex-1 truncate text-center text-sm font-semibold",children:e?.name})]},`${e?.name}`),j=({data:e,configuration:r})=>{const o=(0,c.useRef)(null),n=(0,c.useRef)(null);return(0,g.useGSAP)(()=>{const a=o.current,s=n.current;if(!a||!s)return;const l=f.default.to(s,{scale:1.1,duration:.3,ease:"power1.out",paused:!0});a.addEventListener("mouseenter",()=>l.play()),a.addEventListener("mouseleave",()=>l.reverse())},{scope:o,dependencies:[],revertOnUpdate:!1}),(0,t.jsxs)("div",{ref:o,className:(0,i.cn)("box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{className:"size-full",ref:n,children:(0,t.jsx)(d.default,{className:"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]})},_=({data:e,configuration:r,index:o})=>(0,t.jsxs)("div",{className:(0,i.cn)("box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]","cursor-pointer p-4 hover:bg-[#FFFFFF]",o===0?"row-span-2 h-[252px]":"h-[120px]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,i.cn)(o===0?"max-h-[146px]":"max-h-[72px]"),children:(0,t.jsx)(d.default,{className:(0,i.cn)("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"),source:e?.image?.url||e?.image})}),(0,t.jsx)("p",{className:"line-clamp-2 text-center text-sm font-semibold",children:e?.name})]}),A=({data:e,configuration:r})=>(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((o,n)=>(0,t.jsx)(S,{data:o,configuration:r},n))}),D=({data:e,configuration:r})=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)("div",{className:"mx-auto flex w-full gap-4",children:e?.map((o,n)=>(0,t.jsx)(j,{data:o,configuration:r},n))})}),(0,t.jsx)("div",{className:"tablet:hidden block",children:(0,t.jsx)("div",{className:"grid grid-cols-2 gap-3",children:e?.map((o,n)=>(0,t.jsx)(_,{index:n,data:o,configuration:r},n))})})]}),L=({data:e,buildData:r,className:o="",key:n})=>{const a=e?.isShowSelect?e?.products:e?.productData,s=a?.length<=5;return(0,t.jsxs)("div",{className:(0,i.cn)("w-full",o),children:[e?.title&&(0,t.jsx)(b.default,{data:{title:e?.title}}),s?(0,t.jsx)(D,{data:a,configuration:{shape:e?.shape}}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:block hidden",children:(0,t.jsx)(p.default,{id:`Category${n}`,Slide:I,data:{list:a,configuration:{shape:e?.shape}}})}),(0,t.jsx)("div",{className:"tablet:hidden block overflow-hidden",children:(0,t.jsx)(p.default,{id:`Category1${n}`,Slide:A,data:{list:k(a,6),configuration:{shape:e?.shape}}})})]})]})};var R=(0,x.withStyles)(L);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const imageRef = useRef<HTMLDivElement>(null)\n useGSAP(\n () => {\n const container = containerRef.current\n const imageBox = imageRef.current\n if (!container || !imageBox) return\n const tween = gsap.to(imageBox, {\n scale: 1.1,\n duration: 0.3,\n ease: 'power1.out',\n paused: true,\n })\n\n // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n container.addEventListener('mouseenter', () => tween.play())\n container.addEventListener('mouseleave', () => tween.reverse())\n },\n {\n scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n }\n )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div ref={imageRef}>\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </div>\n <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture\n className=\"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n <p className=\"flex-1 truncate text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const textRef = useRef<HTMLDivElement>(null)\n useGSAP(\n () => {\n const container = containerRef.current\n const textBox = textRef.current\n if (!container || !textBox) return\n const tween = gsap.to(textBox, {\n scale: 1.1,\n duration: 0.3,\n ease: 'power1.out',\n paused: true,\n })\n\n // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n container.addEventListener('mouseenter', () => tween.play())\n container.addEventListener('mouseleave', () => tween.reverse())\n },\n {\n scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n }\n )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"size-full\" ref={textRef}>\n <Picture\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer p-4 hover:bg-[#FFFFFF]',\n index === 0 ? 'row-span-2 h-[252px]' : 'h-[120px]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px]')}>\n <Picture\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n )}\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"line-clamp-2 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\nconst SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <>\n <div className=\"tablet:block hidden\">\n <div className=\"mx-auto flex w-full gap-4\">\n {data?.map((item, index) => {\n return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n <div className=\"tablet:hidden block\">\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n </>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n const isSoundCore = currentData?.length <= 5\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n {isSoundCore ? (\n <SoundCoreCategoryItem data={currentData} configuration={{ shape: data?.shape }} />\n ) : (\n <>\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape } }}\n />\n </div>\n <div className=\"tablet:hidden block overflow-hidden\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape } }}\n />\n </div>\n </>\n )}\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqEI,IAAAI,EAAA,6BApEJC,EAA8B,iBAC9BC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,kCACtBL,EAAwB,uBACxBM,EAAiB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap/dist/gsap.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: any\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const imageRef = useRef<HTMLDivElement>(null)\n useGSAP(\n () => {\n const container = containerRef.current\n const imageBox = imageRef.current\n if (!container || !imageBox) return\n const tween = gsap.to(imageBox, {\n scale: 1.1,\n duration: 0.3,\n ease: 'power1.out',\n paused: true,\n })\n\n // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n container.addEventListener('mouseenter', () => tween.play())\n container.addEventListener('mouseleave', () => tween.reverse())\n },\n {\n scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n }\n )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div ref={imageRef}>\n <Picture\n source={data?.image?.url || data?.image}\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </div>\n <p className=\"tablet:text-lg box-border line-clamp-2 flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst SingleItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n key={`${data?.name}`}\n className={cn(\n 'box-border max-h-[126px] w-full overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer px-3 py-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture\n className=\"mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n <p className=\"flex-1 truncate text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore pc\u5C55\u793A\nconst SinglePcCategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const textRef = useRef<HTMLDivElement>(null)\n useGSAP(\n () => {\n const container = containerRef.current\n const textBox = textRef.current\n if (!container || !textBox) return\n const tween = gsap.to(textBox, {\n scale: 1.1,\n duration: 0.3,\n ease: 'power1.out',\n paused: true,\n })\n\n // \u9F20\u6807\u8FDB\u5165/\u79BB\u5F00\u65F6\u64AD\u653E\u6216\u53CD\u5411\u64AD\u653E\u8BE5\u52A8\u753B\n container.addEventListener('mouseenter', () => tween.play())\n container.addEventListener('mouseleave', () => tween.reverse())\n },\n {\n scope: containerRef, // \u2463 \u5C06 scope \u4F20\u7ED9 useGSAP\uFF0C\u8BA9\u9009\u62E9\u5668\u53EF\u5C40\u9650\u4E8E\u6B64\u4E0A\u4E0B\u6587 :contentReference[oaicite:1]{index=1}\n dependencies: [], // \u4EC5\u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u8FD0\u884C\u4E00\u6B21\n revertOnUpdate: false, // \u4E0D\u5728\u4F9D\u8D56\u66F4\u65B0\u65F6\u8FD8\u539F\u52A8\u753B\n }\n )\n return (\n <div\n ref={containerRef}\n className={cn(\n 'box-border flex w-[calc(20%-12px)] shrink-0 flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 duration-300 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"size-full\" ref={textRef}>\n <Picture\n className=\"laptop:h-[146px] mb-2 flex h-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// soundcore mobile\u5C55\u793A\nconst SingleMobileCategoryItem = ({\n data,\n configuration,\n index,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden bg-[#EAEAEC]',\n 'cursor-pointer p-4 hover:bg-[#FFFFFF]',\n index === 0 ? 'row-span-2 h-[252px]' : 'h-[120px]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className={cn(index === 0 ? 'max-h-[146px]' : 'max-h-[72px]')}>\n <Picture\n className={cn(\n 'mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover'\n )}\n source={data?.image?.url || data?.image}\n />\n </div>\n <p className=\"line-clamp-2 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\n// \u5176\u5B83\u54C1\u724Cmobile\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n )\n}\n\n// soundcore\u5C55\u793A\nconst SoundCoreCategoryItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n return (\n <>\n <div className=\"tablet:block hidden\">\n <div className=\"mx-auto flex w-full gap-4\">\n {data?.map((item, index) => {\n return <SinglePcCategoryItem key={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n <div className=\"tablet:hidden block\">\n <div className=\"grid grid-cols-2 gap-3\">\n {data?.map((item, index) => {\n return <SingleMobileCategoryItem key={index} index={index} data={item} configuration={configuration} />\n })}\n </div>\n </div>\n </>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = data?.isShowSelect ? data?.products : data?.productData\n const isSoundCore = currentData?.length <= 5\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n {isSoundCore ? (\n <SoundCoreCategoryItem data={currentData} configuration={{ shape: data?.shape }} />\n ) : (\n <>\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{ list: currentData, configuration: { shape: data?.shape } }}\n />\n </div>\n <div className=\"tablet:hidden block overflow-hidden\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{ list: chunkArray(currentData, 6), configuration: { shape: data?.shape } }}\n />\n </div>\n </>\n )}\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_gsap", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "containerRef", "imageRef", "container", "imageBox", "tween", "gsap", "Picture", "SingleItem", "SinglePcCategoryItem", "textRef", "textBox", "SingleMobileCategoryItem", "index", "CategoryMobileItem", "item", "SoundCoreCategoryItem", "Category", "buildData", "className", "key", "currentData", "isSoundCore", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var g=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var l in e)a(t,l,{get:e[l],enumerable:!0})},d=(t,e,l,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!y.call(t,r)&&r!==l&&a(t,r,{get:()=>e[r],enumerable:!(m=v(e,r))||m.enumerable});return t};var x=(t,e,l)=>(l=t!=null?g(k(t)):{},d(e||!t||!t.__esModule?a(l,"default",{value:t,enumerable:!0}):l,t)),P=t=>d(a({},"__esModule",{value:!0}),t);var G={};b(G,{default:()=>w});module.exports=P(G);var o=require("react/jsx-runtime"),n=x(require("react")),c=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),s=require("../../components/index.js"),i=require("../../components/index.js"),h=x(require("../Title/index.js"));const u=n.default.forwardRef(({data:t,shape:e,className:l,...m},r)=>(0,o.jsxs)("div",{children:[t?.title&&(0,o.jsx)(h.default,{data:{title:t?.title}}),(0,o.jsx)(s.Carousel,{ref:r,opts:{align:"start"},className:l,children:(0,o.jsx)(n.default.Fragment,{children:(0,o.jsx)(s.CarouselContent,{children:t?.items?.map((p,C)=>(0,o.jsx)(s.CarouselItem,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:(0,o.jsxs)("div",{className:(0,c.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":e==="round"}),children:[(0,o.jsx)(i.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-
|
|
1
|
+
"use strict";"use client";var g=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var l in e)a(t,l,{get:e[l],enumerable:!0})},d=(t,e,l,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!y.call(t,r)&&r!==l&&a(t,r,{get:()=>e[r],enumerable:!(m=v(e,r))||m.enumerable});return t};var x=(t,e,l)=>(l=t!=null?g(k(t)):{},d(e||!t||!t.__esModule?a(l,"default",{value:t,enumerable:!0}):l,t)),P=t=>d(a({},"__esModule",{value:!0}),t);var G={};b(G,{default:()=>w});module.exports=P(G);var o=require("react/jsx-runtime"),n=x(require("react")),c=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),s=require("../../components/index.js"),i=require("../../components/index.js"),h=x(require("../Title/index.js"));const u=n.default.forwardRef(({data:t,shape:e,className:l,...m},r)=>(0,o.jsxs)("div",{children:[t?.title&&(0,o.jsx)(h.default,{data:{title:t?.title}}),(0,o.jsx)(s.Carousel,{ref:r,opts:{align:"start"},className:l,children:(0,o.jsx)(n.default.Fragment,{children:(0,o.jsx)(s.CarouselContent,{children:t?.items?.map((p,C)=>(0,o.jsx)(s.CarouselItem,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:(0,o.jsxs)("div",{className:(0,c.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":e==="round"}),children:[(0,o.jsx)(i.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:p?.imgUrl?.url}),(0,o.jsx)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:(0,o.jsx)(i.Text,{html:p?.title,style:{color:p?.textColor},className:"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium"})})]})},C+p?.title))})},".0")})]}));u.displayName="Graphic";var w=(0,f.withStyles)(u);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n >\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: {\n imgUrl: Img\n title: string\n textColor?: string\n }[]\n }\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={className}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {data?.items?.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n >\n <div\n className={cn('relative h-full', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n })}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={item?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n html={item?.title}\n style={{\n color: item?.textColor,\n }}\n className=\"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium\"\n />\n </div>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </React.Fragment>\n </Carousel>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
5
|
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBsB,IAAAI,EAAA,6BAxBtBC,EAA+B,oBAC/BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwD,qCACxDA,EAA8B,qCAC9BC,EAAkB,gCAgBlB,MAAMC,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,OAElG,QAAC,OACE,UAAAJ,GAAM,UAAS,OAAC,EAAAK,QAAA,CAAM,KAAM,CAAE,MAAOL,GAAM,KAAM,EAAG,KACrD,OAAC,YACC,IAAKI,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,mBAAC,EAAAH,QAAM,SAAN,CACC,mBAAC,mBACE,SAAAC,GAAM,OAAO,IAAI,CAACM,EAAMC,OACvB,OAAC,gBAEC,UAAU,iGAEV,oBAAC,OACC,aAAW,MAAG,kBAAmB,CAC9B,gDAAkDN,IAAU,OAC/D,CAAC,EAED,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQK,GAAM,QAAQ,IACxB,KACA,OAAC,OAAI,UAAU,8DACb,mBAAC,QACC,KAAMA,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAtBKC,EAAQD,GAAM,KAuBrB,CACD,EACH,GA7BkB,IA8BpB,EACF,GACF,CAEH,EAEDR,EAAQ,YAAc,UAEtB,IAAOR,KAAQ,cAAWQ,CAAO",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "Graphic", "React", "data", "shape", "className", "props", "ref", "Title", "item", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var g=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of N(t))!y.call(e,a)&&a!==r&&p(e,a,{get:()=>t[a],enumerable:!(o=P(t,a))||o.enumerable});return e};var q=(e,t,r)=>(r=e!=null?g(C(e)):{},M(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),I=e=>M(p({},"__esModule",{value:!0}),e);var v={};T(v,{MarqueeImageContent:()=>l,MarqueeList:()=>u,MarqueeTextContent:()=>c,default:()=>L});module.exports=I(v);var s=require("react/jsx-runtime"),m=q(require("react")),d=q(require("react-fast-marquee")),h=require("react-fast-marquee"),i=require("../../components/index.js"),n=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const f=({children:e,...t})=>(0,s.jsx)(d.default,{...t,children:e});f.displayName="Marquee";const u=m.default.forwardRef(({className:e,children:t,...r},o)=>(0,s.jsx)("div",{className:(0,n.cn)("laptop:gap-16 flex items-center gap-6",e),ref:o,children:t}));u.displayName="MarqueeList";const l=({data:{image:e},className:t})=>(0,s.jsx)(i.Picture,{source:e
|
|
1
|
+
"use strict";"use client";var g=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},M=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of N(t))!y.call(e,a)&&a!==r&&p(e,a,{get:()=>t[a],enumerable:!(o=P(t,a))||o.enumerable});return e};var q=(e,t,r)=>(r=e!=null?g(C(e)):{},M(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),I=e=>M(p({},"__esModule",{value:!0}),e);var v={};T(v,{MarqueeImageContent:()=>l,MarqueeList:()=>u,MarqueeTextContent:()=>c,default:()=>L});module.exports=I(v);var s=require("react/jsx-runtime"),m=q(require("react")),d=q(require("react-fast-marquee")),h=require("react-fast-marquee"),i=require("../../components/index.js"),n=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const f=({children:e,...t})=>(0,s.jsx)(d.default,{...t,children:e});f.displayName="Marquee";const u=m.default.forwardRef(({className:e,children:t,...r},o)=>(0,s.jsx)("div",{className:(0,n.cn)("laptop:gap-16 flex items-center gap-6",e),ref:o,children:t}));u.displayName="MarqueeList";const l=({data:{image:e},className:t})=>(0,s.jsx)(i.Picture,{source:e?.url,alt:e?.alt,className:(0,n.cn)("laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]",t),imgClassName:"object-cover"});l.displayName="MarqueeImageContent";const c=m.default.forwardRef(({data:{text:e},className:t},r)=>(0,s.jsx)(i.Text,{as:"div",ref:r,html:e,className:(0,n.cn)("text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]",t)}));c.displayName="MarqueeTextContent";var L=(0,x.withStyles)(f);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport FastMarquee from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { Img } from '../../types/props.js'\n\nconst Marquee = ({ children, ...props }: FastMarqueeProps) => {\n return <FastMarquee {...props}>{children}</FastMarquee>\n}\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n children?: React.ReactNode\n className?: string\n}\n\nconst MarqueeList = React.forwardRef<HTMLDivElement, MarqueeListProps>(({ className, children, ...props }, ref) => {\n return (\n <div className={cn('laptop:gap-16 flex items-center gap-6', className)} ref={ref}>\n {children}\n </div>\n )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n data: {\n image: Img\n }\n className?: string\n}\n\nconst MarqueeImageContent = ({ data: { image }, className }: MarqueeImageContentProps) => {\n return (\n <Picture\n source={image
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAUS,IAAAO,EAAA,6BATTC,EAAkB,oBAClBC,EAAwB,iCACxBA,EAAsD,8BACtDC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,OAC7B,OAAC,EAAAC,QAAA,CAAa,GAAGD,EAAQ,SAAAD,EAAS,EAE3CD,EAAQ,YAAc,UAOtB,MAAMV,EAAc,EAAAc,QAAM,WAA6C,CAAC,CAAE,UAAAC,EAAW,SAAAJ,EAAU,GAAGC,CAAM,EAAGI,OAEvG,OAAC,OAAI,aAAW,MAAG,wCAAyCD,CAAS,EAAG,IAAKC,EAC1E,SAAAL,EACH,CAEH,EAEDX,EAAY,YAAc,cAS1B,MAAMD,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAkB,CAAM,EAAG,UAAAF,CAAU,OAEtD,OAAC,WACC,OAAQE,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport FastMarquee from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { Img } from '../../types/props.js'\n\nconst Marquee = ({ children, ...props }: FastMarqueeProps) => {\n return <FastMarquee {...props}>{children}</FastMarquee>\n}\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n children?: React.ReactNode\n className?: string\n}\n\nconst MarqueeList = React.forwardRef<HTMLDivElement, MarqueeListProps>(({ className, children, ...props }, ref) => {\n return (\n <div className={cn('laptop:gap-16 flex items-center gap-6', className)} ref={ref}>\n {children}\n </div>\n )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n data: {\n image: Img\n }\n className?: string\n}\n\nconst MarqueeImageContent = ({ data: { image }, className }: MarqueeImageContentProps) => {\n return (\n <Picture\n source={image?.url}\n alt={image?.alt}\n className={cn('laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]', className)}\n imgClassName=\"object-cover\"\n />\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n data: {\n text: string\n }\n className?: string\n}\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(\n ({ data: { text }, className }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn(\n 'text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]',\n className\n )}\n />\n )\n }\n)\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAUS,IAAAO,EAAA,6BATTC,EAAkB,oBAClBC,EAAwB,iCACxBA,EAAsD,8BACtDC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,OAC7B,OAAC,EAAAC,QAAA,CAAa,GAAGD,EAAQ,SAAAD,EAAS,EAE3CD,EAAQ,YAAc,UAOtB,MAAMV,EAAc,EAAAc,QAAM,WAA6C,CAAC,CAAE,UAAAC,EAAW,SAAAJ,EAAU,GAAGC,CAAM,EAAGI,OAEvG,OAAC,OAAI,aAAW,MAAG,wCAAyCD,CAAS,EAAG,IAAKC,EAC1E,SAAAL,EACH,CAEH,EAEDX,EAAY,YAAc,cAS1B,MAAMD,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAkB,CAAM,EAAG,UAAAF,CAAU,OAEtD,OAAC,WACC,OAAQE,GAAO,IACf,IAAKA,GAAO,IACZ,aAAW,MAAG,qDAAsDF,CAAS,EAC7E,aAAa,eACf,EAIJhB,EAAoB,YAAc,sBASlC,MAAME,EAAqB,EAAAa,QAAM,WAC/B,CAAC,CAAE,KAAM,CAAE,KAAAI,CAAK,EAAG,UAAAH,CAAU,EAAGC,OAE5B,OAAC,QACC,GAAG,MACH,IAAKA,EACL,KAAME,EACN,aAAW,MACT,8FACAH,CACF,EACF,CAGN,EAEAd,EAAmB,YAAc,qBAEjC,IAAOC,KAAQ,cAAWQ,CAAO",
|
|
6
6
|
"names": ["Marquee_exports", "__export", "MarqueeImageContent", "MarqueeList", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_fast_marquee", "import_components", "import_utils", "import_Styles", "Marquee", "children", "props", "FastMarquee", "React", "className", "ref", "image", "text"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var u=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,l)=>{for(var o in l)s(e,o,{get:l[o],enumerable:!0})},p=(e,l,o,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of v(l))!b.call(e,i)&&i!==o&&s(e,i,{get:()=>l[i],enumerable:!(a=h(l,i))||a.enumerable});return e};var r=(e,l,o)=>(o=e!=null?u(w(e)):{},p(l||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),M=e=>p(s({},"__esModule",{value:!0}),e);var D={};y(D,{default:()=>k});module.exports=M(D);var t=require("react/jsx-runtime"),F=require("react"),m=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),n=require("../../components/index.js"),f=r(require("../Title/index.js")),c=r(require("../SwiperBox/index.js")),x=require("@payloadcms/richtext-lexical/html");const N=({data:e,configuration:l})=>(0,t.jsxs)("div",{className:(0,m.cn)("laptop:max-w-full w-full max-w-[296px] overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[(0,t.jsx)(n.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover"}),(0,t.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e.video&&(0,t.jsx)("button",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,t.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 flex min-h-[200px] flex-1 flex-col justify-between gap-4 bg-white p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-lg mb-2 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.quote&&(0,t.jsx)("p",{className:"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.quote})]}),(0,t.jsx)("p",{className:"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]})]}),P=({data:{items:e=[],shape:l="square",title:o},className:a="",key:i})=>{const g=typeof o=="string"?o:o&&(0,x.convertLexicalToHTML)({data:o});return(0,t.jsxs)("div",{className:a,children:[o&&(0,t.jsx)(f.default,{data:{title:g||""}}),(0,t.jsx)(c.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+i,data:{list:e,configuration:{shape:l}},Slide:N})]})};var k=(0,d.withStyles)(P);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data }: { data: MediaPlayerItemProps }) => {\n return (\n <div\n className={cn(\n '
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_html", "MediaPlayerItem", "data", "MediaPlayerMulti", "items", "title", "className", "key", "title_html", "Title", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full max-w-[296px] overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20\">\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 flex min-h-[200px] flex-1 flex-col justify-between gap-4 bg-white p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-lg mb-2 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti: React.FC<MediaPlayerMultiProps> = ({\n data: { items = [], shape = 'square', title },\n className = '',\n key,\n}) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape } }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBM,IAAAI,EAAA,6BAnBNC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAE3C,QAAC,OACC,aAAW,MACT,yDACA,yCACA,iEACAA,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,+DACb,oBAAC,WACC,OAAQD,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,6BACf,KACA,OAAC,OAAI,UAAU,2DACZ,SAAAA,EAAK,UACJ,OAAC,UAAO,UAAU,8FAChB,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,KAEA,QAAC,OAAI,UAAU,oHACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,MAAG,UAAU,gGACX,SAAAA,EAAK,MACR,EACCA,EAAK,UACJ,OAAC,KAAE,UAAU,2FACV,SAAAA,EAAK,MACR,GAEJ,KAEA,OAAC,KAAE,UAAU,qHACV,SAAAA,EAAK,YACR,GACF,GACF,EAIEE,EAAoD,CAAC,CACzD,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAC5C,UAAAC,EAAY,GACZ,IAAAC,CACF,IAAM,CACJ,MAAMC,EAAa,OAAOH,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,QAAC,OAAI,UAAWC,EACb,UAAAD,MAAS,OAAC,EAAAI,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BH,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,CAAM,CAAE,EACrD,MAAOL,EACT,GACF,CAEJ,EAEA,IAAOV,KAAQ,cAAWa,CAAgB",
|
|
6
|
+
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_html", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ComponentCommonProps, Img, Video } from '../../types/props.js';
|
|
2
2
|
export interface MediaPlayerItemProps {
|
|
3
|
+
title: string;
|
|
3
4
|
name: string;
|
|
4
5
|
description: string;
|
|
5
6
|
img: Img;
|
|
@@ -9,6 +10,7 @@ export interface MediaPlayerItemProps {
|
|
|
9
10
|
export interface MediaPlayerMultiProps extends ComponentCommonProps {
|
|
10
11
|
data: {
|
|
11
12
|
title?: string;
|
|
13
|
+
shape?: 'round' | 'square';
|
|
12
14
|
items: MediaPlayerItemProps[];
|
|
13
15
|
};
|
|
14
16
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!m.call(t,o)&&o!==s&&i(t,o,{get:()=>e[o],enumerable:!(r=n(e,o))||r.enumerable});return t};var d=t=>a(i({},"__esModule",{value:!0}),t);var g={};module.exports=d(g);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Img, Video } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n name: string\n description: string\n img: Img\n video?: Video\n quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n items: MediaPlayerItemProps[]\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Img, Video } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n video?: Video\n quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var M=Object.create;var
|
|
1
|
+
"use strict";"use client";var M=Object.create;var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var B=(t,a)=>{for(var r in a)m(t,r,{get:a[r],enumerable:!0})},y=(t,a,r,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of S(a))!z.call(t,s)&&s!==r&&m(t,s,{get:()=>a[s],enumerable:!(o=C(a,s))||o.enumerable});return t};var l=(t,a,r)=>(r=t!=null?M(R(t)):{},y(a||!t||!t.__esModule?m(r,"default",{value:t,enumerable:!0}):r,t)),I=t=>y(m({},"__esModule",{value:!0}),t);var F={};B(F,{default:()=>E});module.exports=I(F);var e=require("react/jsx-runtime"),n=require("react"),f=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),v=l(require("../Slogan/index.js")),i=require("../../components/gird.js"),c=require("../../components/container.js"),b=l(require("../BrandEquity/index.js")),N=l(require("../MemberEquity/index.js")),d=l(require("gsap/dist/gsap.js")),k=l(require("gsap/dist/ScrollTrigger.js")),p=require("@payloadcms/richtext-lexical/html");const q=({children:t,id:a,components:r})=>((0,n.useEffect)(()=>{const o=window.screen.height;d.default.registerPlugin(k.default),d.default.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${o*1.8}px bottom`,markers:!0,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),(0,e.jsxs)("div",{id:a,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:t}),(0,e.jsx)(e.Fragment,{children:r?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"bg-[#1D1D1F]",children:(0,e.jsx)(c.Container,{className:"!my-0",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(b.default,{data:o})}),(0,e.jsx)(i.GridItem,{span:1})]})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"w-full bg-[#1D1D1F] py-10",children:(0,e.jsx)(c.Container,{className:"!my-0",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(N.default,{data:o,className:"w-full"})}),(0,e.jsx)(i.GridItem,{span:1})]})})});default:return null}})})]})),D=({className:t="",id:a,data:{title:r,videoTitle:o,btnText:s,img:T,video:P,theme:u,shape:h,components:w}})=>{const[$,L]=(0,n.useState)(!1),x=(0,n.useRef)(null),G=typeof r=="string"?r:r&&(0,p.convertLexicalToHTML)({data:r});return typeof o=="string"||o&&(0,p.convertLexicalToHTML)({data:o}),(0,e.jsx)(q,{id:a,components:w,children:(0,e.jsxs)("div",{className:(0,f.cn)("relative w-full h-screen",t,{"aiui-dark":u==="dark","rounded-box":h==="rounded"}),children:[(0,e.jsx)("div",{className:"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(c.Container,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsxs)(i.Grid,{children:[(0,e.jsx)(i.GridItem,{span:1}),(0,e.jsx)(i.GridItem,{span:10,children:(0,e.jsx)(v.default,{className:"sticky-title",data:{title:G||"",theme:u}})}),(0,e.jsx)(i.GridItem,{span:1})]})})}),(0,e.jsxs)("div",{className:"media-cover w-full h-screen relative overflow-hidden",children:[(0,e.jsx)("video",{ref:x,className:"size-full object-cover",src:P?.url,autoPlay:!0,muted:!0,loop:!0}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})})};var E=(0,g.withStyles)(D);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDM,IAAAI,EAAA,6BAtDNC,EAAmD,iBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,iCACnBC,EAA+B,oCAC/BC,EAA0B,yCAC1BC,EAAwB,sCACxBC,EAAyB,uCACzBC,
|
|
6
|
-
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_gsap", "import_ScrollTrigger", "import_html", "StickyBox", "children", "id", "components", "height", "ScrollTrigger", "componentData", "BrandEquity", "MemberEquity", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "Slogan"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport gsap from 'gsap/dist/gsap.js'\nimport ScrollTrigger from 'gsap/dist/ScrollTrigger.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst StickyBox = ({\n children,\n id,\n components,\n}: {\n children: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n}) => {\n useEffect(() => {\n const height = window.screen.height\n\n gsap.registerPlugin(ScrollTrigger)\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n markers: true,\n scrub: 0,\n },\n })\n .to(`#${id} .sticky-cover`, {\n opacity: 1,\n duration: 0.3,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }, [])\n\n return (\n <div id={id} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"bg-[#1D1D1F]\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <BrandEquity data={componentData} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"w-full bg-[#1D1D1F] py-10\">\n <Container className=\"!my-0\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <MemberEquity data={componentData} className=\"w-full\" />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n )\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n id,\n data: { title, videoTitle, btnText, img, video, theme, shape, components },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <StickyBox id={id} components={components}>\n <div\n className={cn('relative w-full h-screen', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2\">\n <Container spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Grid>\n <GridItem span={1} />\n <GridItem span={10}>\n <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n </GridItem>\n <GridItem span={1} />\n </Grid>\n </Container>\n </div>\n <div className=\"media-cover w-full h-screen relative overflow-hidden\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </StickyBox>\n )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_gsap", "import_ScrollTrigger", "import_html", "StickyBox", "children", "id", "components", "height", "gsap", "ScrollTrigger", "componentData", "BrandEquity", "MemberEquity", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "Slogan"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var q=Object.create;var d=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var Q=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},F=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of J(e))!O.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(l=B(e,o))||l.enumerable});return t};var
|
|
1
|
+
"use strict";"use client";var q=Object.create;var d=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var Q=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},F=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of J(e))!O.call(t,o)&&o!==r&&d(t,o,{get:()=>e[o],enumerable:!(l=B(e,o))||l.enumerable});return t};var x=(t,e,r)=>(r=t!=null?q(K(t)):{},F(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>F(d({},"__esModule",{value:!0}),t);var Z={};Q(Z,{default:()=>X});module.exports=V(Z);var n=require("react/jsx-runtime"),s=x(require("react")),P=require("@gsap/react"),h=x(require("gsap/dist/gsap.js")),N=x(require("gsap/dist/SplitText.js")),w=x(require("gsap/dist/ScrollTrigger.js")),v=require("../../helpers/utils.js"),y=require("../../components/index.js"),$=require("../../shared/Styles.js");h.default.registerPlugin(N.default,w.default);function W(t=[],e=3){const r=[];for(let l=0;l<t.length;l+=e)r.push(t.slice(l,l+e));return r}const M=s.default.forwardRef(({data:t,className:e=""},r)=>{const{title:l,features:o=[],featureChunkSize:H=3,theme:E}=t,[b,I]=s.default.useState(0),[A,S]=s.default.useState(!0),f=W(o,H),T=f.length,p=o.length>H,C=p?[...f,f[0]]:f,k=40;s.default.useEffect(()=>{if(!p)return;const a=setInterval(()=>{I(i=>i+1),S(!0)},3e3);return()=>clearInterval(a)},[T,p]),s.default.useEffect(()=>{if(p)if(b===T){const a=setTimeout(()=>{S(!1),I(0)},500);return()=>clearTimeout(a)}else S(!0)},[b,T,p]);const c=(0,s.useRef)(null),m=(0,s.useRef)(null);return(0,P.useGSAP)(()=>{if(!c.current)return;m.current=new N.default(c.current,{type:"words",wordsClass:"word"});const a=c.current?.clientHeight||100,i=m.current.words;return h.default.set(i,{opacity:0}),w.default.create({trigger:c.current,start:"bottom bottom",end:`bottom bottom-=${a+40}px`,scrub:!0,onUpdate:u=>{const g=u.progress,G=i.length,j=1/G,R=.5;i.forEach((z,L)=>{const U=L/G*(1-R),Y=j*(1+R);let D=(g-U)/Y;D=Math.max(0,Math.min(D,1)),h.default.set(z,{opacity:D})})}}),()=>{m.current&&m.current.revert(),w.default.getAll().forEach(u=>u.kill())}},[]),(0,n.jsxs)("div",{ref:r,className:(0,v.cn)("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,n.jsx)(y.Heading,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:(0,v.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":E!=="dark","text-[#fff]":E==="dark"}),children:l}),o&&o.length>0&&(0,n.jsx)("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${k}px`},children:(0,n.jsx)("div",{className:(0,v.cn)(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*k}px)`},children:C.map((a,i)=>(0,n.jsx)("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${k}px`},children:a.map((u,g)=>(0,n.jsxs)(s.default.Fragment,{children:[g>0&&(0,n.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),(0,n.jsx)(y.Text,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:u.title})]},g))},i))})})]})});M.displayName="Slogan";var X=(0,$.withStyles)(M);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Slogan/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGM,IAAAI,EAAA,6BApGNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,
|
|
6
|
-
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "SplitText", "ScrollTrigger", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap/dist/gsap.js'\nimport SplitText from 'gsap/dist/SplitText.js'\nimport ScrollTrigger from 'gsap/dist/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n const result = []\n for (let i = 0; i < array.length; i += size) {\n result.push(array.slice(i, i + size))\n }\n return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n const { title, features = [], featureChunkSize = 3, theme } = data\n const [groupIndex, setGroupIndex] = React.useState(0)\n const [isTransitioning, setIsTransitioning] = React.useState(true)\n const featuresGroups = chunkArray(features, featureChunkSize)\n const totalGroups = featuresGroups.length\n const needCarousel = features.length > featureChunkSize\n const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n const groupHeight = 40\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n React.useEffect(() => {\n if (!needCarousel) return\n const timer = setInterval(() => {\n setGroupIndex(i => i + 1)\n setIsTransitioning(true)\n }, 3000)\n return () => clearInterval(timer)\n }, [totalGroups, needCarousel])\n\n // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n React.useEffect(() => {\n if (!needCarousel) return\n if (groupIndex === totalGroups) {\n const handle = setTimeout(() => {\n setIsTransitioning(false)\n setGroupIndex(0)\n }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n return () => clearTimeout(handle)\n } else {\n setIsTransitioning(true)\n }\n }, [groupIndex, totalGroups, needCarousel])\n\n // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const height = titleRef.current?.clientHeight || 100\n\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom bottom-=${height + 40}px`,\n scrub: true,\n onUpdate: self => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word, i) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n },\n })\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n ScrollTrigger.getAll().forEach(t => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n className\n )}\n >\n <Heading\n ref={titleRef}\n as=\"h2\"\n size={2}\n weight={'bold'}\n align={'left'}\n className={cn(\n 'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n {\n 'text-[#1D1D1F]': theme !== 'dark',\n 'text-[#fff]': theme === 'dark',\n }\n )}\n >\n {title}\n </Heading>\n {features && features.length > 0 && (\n <div className=\"relative w-full max-w-[500px] overflow-hidden\" style={{ height: `${groupHeight}px` }}>\n <div\n className={cn([\n 'flex flex-col',\n isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n ])}\n style={{\n transform: `translateY(-${groupIndex * groupHeight}px)`,\n }}\n >\n {displayGroups.map((group, idx) => (\n <div\n className=\"flex w-full flex-row items-stretch gap-3 overflow-hidden\"\n style={{ height: `${groupHeight}px` }}\n key={idx}\n >\n {group.map((feature, index) => (\n <React.Fragment key={index}>\n {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n <Text\n align=\"left\"\n as=\"p\"\n className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]\"\n html={feature.title}\n />\n </React.Fragment>\n ))}\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqGM,IAAAI,EAAA,6BApGNC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAiB,gCACjBC,EAAsB,qCACtBC,EAA0B,yCAC1BC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAG3B,EAAAC,QAAK,eAAe,EAAAC,QAAW,EAAAC,OAAa,EAE5C,SAASC,EAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,EAAG,MAAAC,CAAM,EAAIN,EACxD,CAACO,EAAYC,CAAa,EAAI,EAAAT,QAAM,SAAS,CAAC,EAC9C,CAACU,EAAiBC,CAAkB,EAAI,EAAAX,QAAM,SAAS,EAAI,EAC3DY,EAAiBlB,EAAWW,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,GAGpB,EAAAhB,QAAM,UAAU,IAAM,CACpB,GAAI,CAACc,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BR,EAAc,GAAK,EAAI,CAAC,EACxBE,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcM,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9B,EAAAd,QAAM,UAAU,IAAM,CACpB,GAAKc,EACL,GAAIN,IAAeK,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BP,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaS,CAAM,CAClC,MACEP,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYK,EAAaC,CAAY,CAAC,EAG1C,MAAMK,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CACZ,GAAI,CAACD,EAAS,QAAS,OACvBC,EAAkB,QAAU,IAAI,EAAA5B,QAAU2B,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAME,EAASF,EAAS,SAAS,cAAgB,IAE3CG,EAAQF,EAAkB,QAAQ,MACxC,SAAA7B,QAAK,IAAI+B,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,EAAA7B,QAAc,OAAO,CACnB,QAAS0B,EAAS,QAClB,MAAO,gBACP,IAAK,kBAAkBE,EAAS,EAAE,KAClC,MAAO,GACP,SAAUE,GAAQ,CAChB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAM9B,IAAM,CACzB,MAAM+B,EAAS/B,EAAI2B,GAAU,EAAIE,GAC3BG,EAAQJ,GAAY,EAAIC,GAC9B,IAAII,GAAWP,EAAWK,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,EAAAxC,QAAK,IAAIqC,EAAM,CAAE,QAAAG,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXX,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,EAAA3B,QAAc,OAAO,EAAE,QAAQuC,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAK7B,EACL,aAAW,MACT,0JACAD,CACF,EAEA,oBAAC,WACC,IAAKiB,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,aAAW,MACT,uGACA,CACE,iBAAkBZ,IAAU,OAC5B,cAAeA,IAAU,MAC3B,CACF,EAEC,SAAAH,EACH,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,UAAU,gDAAgD,MAAO,CAAE,OAAQ,GAAGW,CAAW,IAAK,EACjG,mBAAC,OACC,aAAW,MAAG,CACZ,gBACAN,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaQ,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACkB,EAAOC,OACzB,OAAC,OACC,UAAU,2DACV,MAAO,CAAE,OAAQ,GAAGlB,CAAW,IAAK,EAGnC,SAAAiB,EAAM,IAAI,CAACE,EAASC,OACnB,QAAC,EAAApC,QAAM,SAAN,CACE,UAAAoC,EAAQ,MAAK,OAAC,OAAI,UAAU,wDAAwD,KACrF,OAAC,QACC,MAAM,OACN,GAAG,IACH,UAAU,8HACV,KAAMD,EAAQ,MAChB,IAPmBC,CAQrB,CACD,GAZIF,CAaP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDnC,EAAO,YAAc,SAErB,IAAOlB,KAAQ,cAAWkB,CAAM",
|
|
6
|
+
"names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "gsap", "SplitText", "ScrollTrigger", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var x=Object.create;var a=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var P=(e,r)=>{for(var o in r)a(e,o,{get:r[o],enumerable:!0})},w=(e,r,o,
|
|
1
|
+
"use strict";"use client";var x=Object.create;var a=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var P=(e,r)=>{for(var o in r)a(e,o,{get:r[o],enumerable:!0})},w=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of g(r))!E.call(e,s)&&s!==o&&a(e,s,{get:()=>r[s],enumerable:!(n=B(r,s))||n.enumerable});return e};var v=(e,r,o)=>(o=e!=null?x(M(e)):{},w(r||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),y=e=>w(a({},"__esModule",{value:!0}),e);var b={};P(b,{default:()=>N});module.exports=y(b);var l=require("react/jsx-runtime"),i=v(require("react")),d=require("../../helpers/utils.js"),f=require("swiper/react"),t=require("swiper/modules");const m=i.default.forwardRef(({data:e,breakpoints:r,Slide:o,className:n,id:s})=>{const[h,u]=(0,i.useState)(!0),[V,c]=(0,i.useState)(!1);return(0,l.jsx)(f.Swiper,{className:(0,d.cn)(n),navigation:{nextEl:`.${s}-custom-swiper-button-next`,prevEl:`.${s}-custom-swiper-button-prev`},onProgress:p=>{u(p.isBeginning),c(p.isEnd)},modules:[t.Navigation,t.FreeMode,t.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:r||{0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,freeMode:!1,slidesPerView:2.3},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},children:e?.list?.map((p,S)=>(0,l.jsx)(f.SwiperSlide,{className:"!flex !h-[unset]",children:(0,l.jsx)(o,{data:p,configuration:e?.configuration})},s+"SwiperSlide"+S))})});m.displayName="SwiperBox";var N=m;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/SwiperBox/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, breakpoints, Slide, className, id }) => {\n const [isStart, setStart] = useState(true)\n const [isEnd, setEnd] = useState(false)\n\n return (\n <Swiper\n className={cn(className)}\n navigation={{\n nextEl: `.${id}-custom-swiper-button-next`,\n prevEl: `.${id}-custom-swiper-button-prev`,\n }}\n onProgress={swiper => {\n setStart(swiper.isBeginning)\n setEnd(swiper.isEnd)\n }}\n modules={[Navigation, FreeMode, Mousewheel]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween:
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAAgC,oBAChCC,EAAmB,kCAGnBD,EAAoC,wBACpCE,EAAiD,0BAGjD,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,KAAI,YAAS,EAAI,EACnC,CAACC,EAAOC,CAAM,KAAI,YAAS,EAAK,EAEtC,SACE,OAAC,UACC,aAAW,MAAGL,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYK,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAAC,aAAY,WAAU,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACER,GAAe,CACb,EAAG,CACD,aAAc,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, breakpoints, Slide, className, id }) => {\n const [isStart, setStart] = useState(true)\n const [isEnd, setEnd] = useState(false)\n\n return (\n <Swiper\n className={cn(className)}\n navigation={{\n nextEl: `.${id}-custom-swiper-button-next`,\n prevEl: `.${id}-custom-swiper-button-prev`,\n }}\n onProgress={swiper => {\n setStart(swiper.isBeginning)\n setEnd(swiper.isEnd)\n }}\n modules={[Navigation, FreeMode, Mousewheel]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n slidesPerView: 1,\n freeMode: false,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 768: {\n spaceBetween: 16,\n slidesPerView: 2,\n freeMode: false,\n },\n }\n }\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!flex !h-[unset]\">\n <Slide data={item} configuration={data?.configuration} />\n </SwiperSlide>\n ))}\n </Swiper>\n )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAAgC,oBAChCC,EAAmB,kCAGnBD,EAAoC,wBACpCE,EAAiD,0BAGjD,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,KAAI,YAAS,EAAI,EACnC,CAACC,EAAOC,CAAM,KAAI,YAAS,EAAK,EAEtC,SACE,OAAC,UACC,aAAW,MAAGL,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYK,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAAC,aAAY,WAAU,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACER,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACU,EAAMC,OACtB,OAAC,eAA8C,UAAU,mBACvD,mBAACT,EAAA,CAAM,KAAMQ,EAAM,cAAeV,GAAM,cAAe,GADvCI,EAAK,cAAgBO,CAEvC,CACD,EACH,CAEJ,CAAC,EAEDb,EAAU,YAAc,YAExB,IAAON,EAAQM",
|
|
6
6
|
"names": ["SwiperBox_exports", "__export", "SwiperBox_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_modules", "SwiperBox", "React", "data", "breakpoints", "Slide", "className", "id", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var L=Object.create;var l=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},w=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of z(r))!D.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(i=N(r,o))||i.enumerable});return t};var
|
|
1
|
+
"use strict";"use client";var L=Object.create;var l=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},w=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of z(r))!D.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(i=N(r,o))||i.enumerable});return t};var c=(t,r,e)=>(e=t!=null?L(C(t)):{},w(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>w(l({},"__esModule",{value:!0}),t);var $={};G($,{default:()=>U});module.exports=I($);var g=require("react/jsx-runtime"),s=c(require("react")),y=require("@gsap/react"),a=c(require("gsap/dist/gsap.js")),d=c(require("gsap/dist/SplitText.js")),m=c(require("gsap/dist/ScrollTrigger.js")),x=require("../../helpers/utils.js"),v=require("../../components/index.js"),H=require("../../shared/Styles.js");a.default.registerPlugin(d.default,m.default);const b=s.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:i}=t,o=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,y.useGSAP)(()=>{if(!o.current)return;const S=o.current?.clientHeight||80;n.current=new d.default(o.current,{type:"words",wordsClass:"word"});const p=n.current.words;return a.default.set(p,{opacity:0}),m.default.create({trigger:o.current,start:"bottom bottom",end:`bottom bottom+=${S+20}px`,scrub:!0,onUpdate:u=>{const E=u.progress,h=p.length,M=1/h,T=.5;p.forEach((P,R)=>{const k=R/h*(1-T),A=M*(1+T);let f=(E-k)/A;f=Math.max(0,Math.min(f,1)),a.default.set(P,{opacity:f})})}}),()=>{n.current&&n.current.revert(),m.default.getAll().forEach(u=>u.kill())}},[]),e&&(0,g.jsx)("div",{className:(0,x.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":i==="dark"}),children:(0,g.jsx)(v.Heading,{ref:o,as:"h2",size:5,html:e})})});b.displayName="Title";var U=(0,H.withStyles)(b);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|