@anker-in/headless-ui 0.0.27-alpha.63 → 0.0.27-alpha.65
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/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 +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- 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 +2 -2
- 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/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.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 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 l=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)l(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&&l(t,s,{get:()=>a[s],enumerable:!(o=C(a,s))||o.enumerable});return t};var m=(t,a,r)=>(r=t!=null?M(R(t)):{},y(a||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t)),I=t=>y(l({},"__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=m(require("../Slogan/index.js")),i=require("../../components/gird.js"),c=require("../../components/container.js"),b=m(require("../BrandEquity/index.js")),N=m(require("../MemberEquity/index.js")),d=require("gsap"),k=m(require("gsap/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.gsap.registerPlugin(k.default),d.gsap.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);
|
|
1
|
+
"use strict";"use client";var M=Object.create;var l=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)l(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&&l(t,s,{get:()=>a[s],enumerable:!(o=C(a,s))||o.enumerable});return t};var m=(t,a,r)=>(r=t!=null?M(R(t)):{},y(a||!t||!t.__esModule?l(r,"default",{value:t,enumerable:!0}):r,t)),I=t=>y(l({},"__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=m(require("../Slogan/index.js")),i=require("../../components/gird.js"),c=require("../../components/container.js"),b=m(require("../BrandEquity/index.js")),N=m(require("../MemberEquity/index.js")),d=require("gsap"),k=m(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.gsap.registerPlugin(k.default),d.gsap.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 { gsap } from 'gsap'\nimport ScrollTrigger from 'gsap/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": "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,EAAqB,gBACrBC,EAA0B,
|
|
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'\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
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"]
|
|
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 D=(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=D(require("react")),P=require("@gsap/react"),x=require("gsap"),N=D(require("gsap/SplitText.js")),h=D(require("gsap/ScrollTrigger.js")),w=require("../../helpers/utils.js"),v=require("../../components/index.js"),$=require("../../shared/Styles.js");x.gsap.registerPlugin(N.default,h.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,[y,I]=s.default.useState(0),[A,b]=s.default.useState(!0),f=W(o,H),S=f.length,p=o.length>H,C=p?[...f,f[0]]:f,T=40;s.default.useEffect(()=>{if(!p)return;const a=setInterval(()=>{I(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[S,p]),s.default.useEffect(()=>{if(p)if(y===S){const a=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(a)}else b(!0)},[y,S,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 x.gsap.set(i,{opacity:0}),h.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 k=(g-U)/Y;k=Math.max(0,Math.min(k,1)),x.gsap.set(z,{opacity:k})})}}),()=>{m.current&&m.current.revert(),h.default.getAll().forEach(u=>u.kill())}},[]),(0,n.jsxs)("div",{ref:r,className:(0,w.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)(v.Heading,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:(0,w.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:`${T}px`},children:(0,n.jsx)("div",{className:(0,w.cn)(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*T}px)`},children:C.map((a,i)=>(0,n.jsx)("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${T}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)(v.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);
|
|
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 D=(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=D(require("react")),P=require("@gsap/react"),x=require("gsap"),N=D(require("gsap/dist/SplitText.js")),h=D(require("gsap/dist/ScrollTrigger.js")),w=require("../../helpers/utils.js"),v=require("../../components/index.js"),$=require("../../shared/Styles.js");x.gsap.registerPlugin(N.default,h.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,[y,I]=s.default.useState(0),[A,b]=s.default.useState(!0),f=W(o,H),S=f.length,p=o.length>H,C=p?[...f,f[0]]:f,T=40;s.default.useEffect(()=>{if(!p)return;const a=setInterval(()=>{I(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[S,p]),s.default.useEffect(()=>{if(p)if(y===S){const a=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(a)}else b(!0)},[y,S,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 x.gsap.set(i,{opacity:0}),h.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 k=(g-U)/Y;k=Math.max(0,Math.min(k,1)),x.gsap.set(z,{opacity:k})})}}),()=>{m.current&&m.current.revert(),h.default.getAll().forEach(u=>u.kill())}},[]),(0,n.jsxs)("div",{ref:r,className:(0,w.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)(v.Heading,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:(0,w.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:`${T}px`},children:(0,n.jsx)("div",{className:(0,w.cn)(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*T}px)`},children:C.map((a,i)=>(0,n.jsx)("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${T}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)(v.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 { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/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,EAAqB,gBACrBC,EAAsB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\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": "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",
|
|
6
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"]
|
|
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 f=(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=f(require("react")),y=require("@gsap/react"),c=require("gsap"),d=f(require("gsap/SplitText.js")),a=f(require("gsap/ScrollTrigger.js")),x=require("../../helpers/utils.js"),v=require("../../components/index.js"),H=require("../../shared/Styles.js");c.gsap.registerPlugin(d.default,a.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 m=n.current.words;return c.gsap.set(m,{opacity:0}),a.default.create({trigger:o.current,start:"bottom bottom",end:`bottom bottom+=${S+20}px`,scrub:!0,onUpdate:p=>{const E=p.progress,h=m.length,M=1/h,T=.5;m.forEach((P,R)=>{const k=R/h*(1-T),A=M*(1+T);let u=(E-k)/A;u=Math.max(0,Math.min(u,1)),c.gsap.set(P,{opacity:u})})}}),()=>{n.current&&n.current.revert(),a.default.getAll().forEach(p=>p.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);
|
|
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 f=(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=f(require("react")),y=require("@gsap/react"),c=require("gsap"),d=f(require("gsap/dist/SplitText.js")),a=f(require("gsap/dist/ScrollTrigger.js")),x=require("../../helpers/utils.js"),v=require("../../components/index.js"),H=require("../../shared/Styles.js");c.gsap.registerPlugin(d.default,a.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 m=n.current.words;return c.gsap.set(m,{opacity:0}),a.default.create({trigger:o.current,start:"bottom bottom",end:`bottom bottom+=${S+20}px`,scrub:!0,onUpdate:p=>{const E=p.progress,h=m.length,M=1/h,T=.5;m.forEach((P,R)=>{const k=R/h*(1-T),A=M*(1+T);let u=(E-k)/A;u=Math.max(0,Math.min(u,1)),c.gsap.set(P,{opacity:u})})}}),()=>{n.current&&n.current.revert(),a.default.getAll().forEach(p=>p.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
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\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 + 20}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 title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAAsB,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/dist/SplitText.js'\nimport ScrollTrigger from 'gsap/dist/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\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 + 20}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 title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAAsB,qCACtBC,EAA0B,yCAC1BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,OAAK,eAAe,EAAAC,QAAW,EAAAC,OAAa,EAC5C,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CACZ,GAAI,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,EAAAT,QAAUQ,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,EAAAV,QAAc,OAAO,CACnB,QAASO,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,EAAMC,IAAM,CACzB,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,EAAAR,QAAc,OAAO,EAAE,QAAQqB,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,EAGHhB,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCD,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOZ,KAAQ,cAAWY,CAAK",
|
|
6
6
|
"names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "SplitText", "ScrollTrigger", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var n=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},r=(e,t,o,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of p(t))!m.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(c=f(t,a))||c.enumerable});return e};var y=(e,t,o)=>(o=e!=null?n(d(e)):{},r(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e)),u=e=>r(i({},"__esModule",{value:!0}),e);var k={};b(k,{Default:()=>g,Multi:()=>v,default:()=>M});module.exports=u(k);var l=y(require("../biz-components/MediaPlayerMulti/index.js"));const s=[{title:"MKBHD",name:"MKBHD",description:"18.2 Million Youtube subscribers",quote:'"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like."',img:{url:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110",alt:"MKBHD"},video:{url:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}},{title:"Unbox Therapy",name:"Unbox Therapy",description:"18.2 Million Youtube subscribers",quote:'"I highly recommend the Anker Nano Pro. This truly is a no-brainer."',img:{url:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094",alt:"Unbox Therapy"},video:{url:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}}],h={title:"Biz-Components/MediaPlayerMulti",component:l.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var M=h;const g={args:{data:{items:s}}},v={args:{data:{items:s?.concat(s)}}};
|
|
2
2
|
//# sourceMappingURL=mediaplayerMulti.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/mediaplayerMulti.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaPlayerMulti from '../biz-components/MediaPlayerMulti/index.js'\n\nconst testimonialItems = [\n {\n name: 'MKBHD',\n description: '18.2 Million Youtube subscribers',\n quote:\n '\"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110',\n alt: 'MKBHD',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n {\n name: 'Unbox Therapy',\n description: '18.2 Million Youtube subscribers',\n quote: '\"I highly recommend the Anker Nano Pro. This truly is a no-brainer.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094',\n alt: 'Unbox Therapy',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n]\n\nconst meta = {\n title: 'Biz-Components/MediaPlayerMulti',\n component: MediaPlayerMulti,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof MediaPlayerMulti>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n items: testimonialItems,\n },\n },\n}\n\nexport const Multi: Story = {\n args: {\n data: {\n items: testimonialItems?.concat(testimonialItems),\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAA6B,0DAE7B,MAAMC,EAAmB,CACvB,CACE,KAAM,QACN,YAAa,mCACb,MACE,mIACF,IAAK,CACH,IAAK,gJACL,IAAK,OACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,EACA,CACE,KAAM,gBACN,YAAa,mCACb,MAAO,uEACP,IAAK,CACH,IAAK,gJACL,IAAK,eACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAGR,MAAMN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAOK,CACT,CACF,CACF,EAEaJ,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAOI,GAAkB,OAAOA,CAAgB,CAClD,CACF,CACF",
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaPlayerMulti from '../biz-components/MediaPlayerMulti/index.js'\n\nconst testimonialItems = [\n {\n title: 'MKBHD',\n name: 'MKBHD',\n description: '18.2 Million Youtube subscribers',\n quote:\n '\"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110',\n alt: 'MKBHD',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n {\n title: 'Unbox Therapy',\n name: 'Unbox Therapy',\n description: '18.2 Million Youtube subscribers',\n quote: '\"I highly recommend the Anker Nano Pro. This truly is a no-brainer.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094',\n alt: 'Unbox Therapy',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n]\n\nconst meta = {\n title: 'Biz-Components/MediaPlayerMulti',\n component: MediaPlayerMulti,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof MediaPlayerMulti>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n items: testimonialItems,\n },\n },\n}\n\nexport const Multi: Story = {\n args: {\n data: {\n items: testimonialItems?.concat(testimonialItems),\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAA6B,0DAE7B,MAAMC,EAAmB,CACvB,CACE,MAAO,QACP,KAAM,QACN,YAAa,mCACb,MACE,mIACF,IAAK,CACH,IAAK,gJACL,IAAK,OACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,EACA,CACE,MAAO,gBACP,KAAM,gBACN,YAAa,mCACb,MAAO,uEACP,IAAK,CACH,IAAK,gJACL,IAAK,eACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAGR,MAAMN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAOK,CACT,CACF,CACF,EAEaJ,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAOI,GAAkB,OAAOA,CAAgB,CAClD,CACF,CACF",
|
|
6
6
|
"names": ["mediaplayerMulti_stories_exports", "__export", "Default", "Multi", "mediaplayerMulti_stories_default", "__toCommonJS", "import_MediaPlayerMulti", "testimonialItems", "meta", "MediaPlayerMulti"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import p from"../../components/picture.js";import{withStyles as n}from"../../shared/Styles.js";const m=({data:{items:r=[]},itemShape:i="square",className:d=""})=>e("div",{className:a("brand-equity-wrapper w-full",d),children:e("div",{className:a("grid gap-3","tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:grid-cols-10"),children:r.map((t,l)=>s("div",{className:a("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(l)},i==="round"?"rounded-2xl":"rounded-none"),children:[s("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[e("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.type==="avatar"?e("div",{className:"flex -space-x-2",children:t?.avatarList?.map((o,c)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(p,{source:o.avatar.url,alt:o.avatar?.alt,className:"size-full object-cover"})},c))}):e(p,{className:"lg-desktop:size-[36px] size-[30px] object-cover",source:t.icon?.url,alt:t.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),e("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]},l))})});var b=n(m);export{b as default};
|
|
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": "
|
|
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": "aA4BY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA3BZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAK3B,MAAMC,EAA0C,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,CAAE,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAE1GR,EAAC,OAAI,UAAWE,EAAG,8BAA+BM,CAAS,EACzD,SAAAR,EAAC,OAAI,UAAWE,EAAG,aAAc,iCAAkC,kCAAkC,EAClG,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,cAAgB,cAC1C,EAEA,UAAAN,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,MAAG,UAAU,mGACX,SAAAS,EAAK,MACR,EACCA,EAAK,OAAS,SACbT,EAAC,OAAI,UAAU,kBACZ,SAAAS,GAAM,YAAY,IAAI,CAACA,EAAuBC,IAC7CV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQM,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,EAEAV,EAACG,EAAA,CACC,UAAU,kDACV,OAAQM,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,EACAT,EAAC,KAAE,UAAU,+FACV,SAAAS,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,EAIJ,IAAOC,EAAQP,EAAWC,CAAW",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "BrandEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import l from"react";import{cn as n}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Carousel as x,CarouselContent as u,CarouselItem as c}from"../../components/index.js";import{Picture as f,Text as h}from"../../components/index.js";import C from"../Title/index.js";const r=l.forwardRef(({data:o,shape:p,className:a,...g},i)=>s("div",{children:[o?.title&&t(C,{data:{title:o?.title}}),t(x,{ref:i,opts:{align:"start"},className:a,children:t(l.Fragment,{children:t(u,{children:o?.items?.map((e,m)=>t(c,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:s("div",{className:n("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":p==="round"}),children:[t(f,{className:"h-full",imgClassName:"h-full object-cover hover:scale-
|
|
1
|
+
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import l from"react";import{cn as n}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Carousel as x,CarouselContent as u,CarouselItem as c}from"../../components/index.js";import{Picture as f,Text as h}from"../../components/index.js";import C from"../Title/index.js";const r=l.forwardRef(({data:o,shape:p,className:a,...g},i)=>s("div",{children:[o?.title&&t(C,{data:{title:o?.title}}),t(x,{ref:i,opts:{align:"start"},className:a,children:t(l.Fragment,{children:t(u,{children:o?.items?.map((e,m)=>t(c,{className:"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]",children:s("div",{className:n("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":p==="round"}),children:[t(f,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),t("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:t(h,{html:e?.title,style:{color:e?.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"})})]})},m+e?.title))})},".0")})]}));r.displayName="Graphic";var G=d(r);export{G as default};
|
|
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": "aAyBsB,cAAAA,EAeN,QAAAC,MAfM,oBAxBtB,OAAOC,MAAwB,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAgBlB,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,KAAAU,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAElGf,EAAC,OACE,UAAAW,GAAM,OAASZ,EAACU,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDZ,EAACK,EAAA,CACC,IAAKW,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,SAAAd,EAACE,EAAM,SAAN,CACC,SAAAF,EAACM,EAAA,CACE,SAAAM,GAAM,OAAO,IAAI,CAACK,EAAMC,IACvBlB,EAACO,EAAA,CAEC,UAAU,iGAEV,SAAAN,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDU,IAAU,OAC/D,CAAC,EAED,UAAAb,EAACQ,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQS,GAAM,QAAQ,IACxB,EACAjB,EAAC,OAAI,UAAU,8DACb,SAAAA,EAACS,EAAA,CACC,KAAMQ,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAtBKC,EAAQD,GAAM,KAuBrB,CACD,EACH,GA7BkB,IA8BpB,EACF,GACF,CAEH,EAEDN,EAAQ,YAAc,UAEtB,IAAOQ,EAAQf,EAAWO,CAAO",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Title", "Graphic", "data", "shape", "className", "props", "ref", "item", "index", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as r}from"react/jsx-runtime";import o from"react";import l from"react-fast-marquee";import"react-fast-marquee";import{Picture as c,Text as M}from"../../components/index.js";import{cn as a}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";const p=({children:e,...t})=>r(l,{...t,children:e});p.displayName="Marquee";const n=o.forwardRef(({className:e,children:t,...s},u)=>r("div",{className:a("laptop:gap-16 flex items-center gap-6",e),ref:u,children:t}));n.displayName="MarqueeList";const i=({data:{image:e},className:t})=>r(c,{source:e
|
|
1
|
+
"use client";import{jsx as r}from"react/jsx-runtime";import o from"react";import l from"react-fast-marquee";import"react-fast-marquee";import{Picture as c,Text as M}from"../../components/index.js";import{cn as a}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";const p=({children:e,...t})=>r(l,{...t,children:e});p.displayName="Marquee";const n=o.forwardRef(({className:e,children:t,...s},u)=>r("div",{className:a("laptop:gap-16 flex items-center gap-6",e),ref:u,children:t}));n.displayName="MarqueeList";const i=({data:{image:e},className:t})=>r(c,{source:e?.url,alt:e?.alt,className:a("laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]",t),imgClassName:"object-cover"});i.displayName="MarqueeImageContent";const m=o.forwardRef(({data:{text:e},className:t},s)=>r(M,{as:"div",ref:s,html:e,className:a("text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]",t)}));m.displayName="MarqueeTextContent";var C=q(p);export{i as MarqueeImageContent,n as MarqueeList,m as MarqueeTextContent,C as default};
|
|
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": "aAUS,cAAAA,MAAA,oBATT,OAAOC,MAAW,QAClB,OAAOC,MAAiB,qBACxB,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAC7BT,EAACE,EAAA,CAAa,GAAGO,EAAQ,SAAAD,EAAS,EAE3CD,EAAQ,YAAc,UAOtB,MAAMG,EAAcT,EAAM,WAA6C,CAAC,CAAE,UAAAU,EAAW,SAAAH,EAAU,GAAGC,CAAM,EAAGG,IAEvGZ,EAAC,OAAI,UAAWK,EAAG,wCAAyCM,CAAS,EAAG,IAAKC,EAC1E,SAAAJ,EACH,CAEH,EAEDE,EAAY,YAAc,cAS1B,MAAMG,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAC,CAAM,EAAG,UAAAH,CAAU,IAEtDX,EAACG,EAAA,CACC,OAAQW,
|
|
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": "aAUS,cAAAA,MAAA,oBATT,OAAOC,MAAW,QAClB,OAAOC,MAAiB,qBACxB,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAC7BT,EAACE,EAAA,CAAa,GAAGO,EAAQ,SAAAD,EAAS,EAE3CD,EAAQ,YAAc,UAOtB,MAAMG,EAAcT,EAAM,WAA6C,CAAC,CAAE,UAAAU,EAAW,SAAAH,EAAU,GAAGC,CAAM,EAAGG,IAEvGZ,EAAC,OAAI,UAAWK,EAAG,wCAAyCM,CAAS,EAAG,IAAKC,EAC1E,SAAAJ,EACH,CAEH,EAEDE,EAAY,YAAc,cAS1B,MAAMG,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAC,CAAM,EAAG,UAAAH,CAAU,IAEtDX,EAACG,EAAA,CACC,OAAQW,GAAO,IACf,IAAKA,GAAO,IACZ,UAAWT,EAAG,qDAAsDM,CAAS,EAC7E,aAAa,eACf,EAIJE,EAAoB,YAAc,sBASlC,MAAME,EAAqBd,EAAM,WAC/B,CAAC,CAAE,KAAM,CAAE,KAAAe,CAAK,EAAG,UAAAL,CAAU,EAAGC,IAE5BZ,EAACI,EAAA,CACC,GAAG,MACH,IAAKQ,EACL,KAAMI,EACN,UAAWX,EACT,8FACAM,CACF,EACF,CAGN,EAEAI,EAAmB,YAAc,qBAEjC,IAAOE,EAAQX,EAAWC,CAAO",
|
|
6
6
|
"names": ["jsx", "React", "FastMarquee", "Picture", "Text", "cn", "withStyles", "Marquee", "children", "props", "MarqueeList", "className", "ref", "MarqueeImageContent", "image", "MarqueeTextContent", "text", "Marquee_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import"react";import{cn as r}from"../../helpers/utils.js";import{withStyles as m}from"../../shared/Styles.js";import{Picture as d}from"../../components/index.js";import n from"../Title/index.js";import f from"../SwiperBox/index.js";import{convertLexicalToHTML as c}from"@payloadcms/richtext-lexical/html";const x=({data:t,configuration:i})=>o("div",{className:r("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",i.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[e(d,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t.video&&e("button",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("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:[o("div",{className:"flex flex-col",children:[e("h3",{className:"lg-desktop:text-lg mb-2 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.quote&&e("p",{className:"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.quote})]}),e("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:t.description})]})]}),g=({data:{items:t=[],shape:i="square",title:l},className:a="",key:s})=>{const p=typeof l=="string"?l:l&&c({data:l});return o("div",{className:a,children:[l&&e(n,{data:{title:p||""}}),e(f,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+s,data:{list:t,configuration:{shape:i}},Slide:x})]})};var P=m(g);export{P as default};
|
|
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": "
|
|
6
|
-
"names": ["jsx", "jsxs", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "MediaPlayerMulti", "items", "title", "className", "key", "title_html", "MediaPlayerMulti_default"]
|
|
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": "aAoBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAnBN,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAE3CT,EAAC,OACC,UAAWC,EACT,yDACA,yCACA,iEACAQ,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAT,EAAC,OAAI,UAAU,+DACb,UAAAD,EAACI,EAAA,CACC,OAAQK,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,6BACf,EACAT,EAAC,OAAI,UAAU,2DACZ,SAAAS,EAAK,OACJT,EAAC,UAAO,UAAU,8FAChB,SAAAA,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oHACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,gGACX,SAAAS,EAAK,MACR,EACCA,EAAK,OACJT,EAAC,KAAE,UAAU,2FACV,SAAAS,EAAK,MACR,GAEJ,EAEAT,EAAC,KAAE,UAAU,qHACV,SAAAS,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,GAASP,EAAqB,CAAE,KAAMO,CAAM,CAAC,EACpG,OACEb,EAAC,OAAI,UAAWc,EACb,UAAAD,GAASd,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOY,GAAc,EAAG,EAAG,EACpDjB,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BU,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,CAAM,CAAE,EACrD,MAAOL,EACT,GACF,CAEJ,EAEA,IAAOU,EAAQf,EAAWQ,CAAgB",
|
|
6
|
+
"names": ["jsx", "jsxs", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "MediaPlayerMulti_default"]
|
|
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 client";import{Fragment as p,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as b,useRef as N,useEffect as k}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import w from"../Slogan/index.js";import{Grid as n,GridItem as a}from"../../components/gird.js";import{Container as l}from"../../components/container.js";import x from"../BrandEquity/index.js";import G from"../MemberEquity/index.js";import{gsap as c}from"gsap";import M from"gsap/ScrollTrigger.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";const C=({children:s,id:r,components:i})=>(k(()=>{const t=window.screen.height;c.registerPlugin(M),c.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${t*1.8}px bottom`,markers:!0,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:r,className:"relative z-10",children:[e(p,{children:s}),e(p,{children:i?.map(t=>{switch(t.blockType){case"ipc-brand-equity":return e("div",{className:"bg-[#1D1D1F]",children:e(l,{className:"!my-0",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(x,{data:t})}),e(a,{span:1})]})})});case"ipc-member-equity":return e("div",{className:"w-full bg-[#1D1D1F] py-10",children:e(l,{className:"!my-0",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(G,{data:t,className:"w-full"})}),e(a,{span:1})]})})});default:return null}})})]})),S=({className:s="",id:r,data:{title:i,videoTitle:t,btnText:R,img:z,video:u,theme:m,shape:y,components:f}})=>{const[B,I]=b(!1),g=N(null),v=typeof i=="string"?i:i&&d({data:i});return typeof t=="string"||t&&d({data:t}),e(C,{id:r,components:f,children:o("div",{className:P("relative w-full h-screen",s,{"aiui-dark":m==="dark","rounded-box":y==="rounded"}),children:[e("div",{className:"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2",children:e(l,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(w,{className:"sticky-title",data:{title:v||"",theme:m}})}),e(a,{span:1})]})})}),o("div",{className:"media-cover w-full h-screen relative overflow-hidden",children:[e("video",{ref:g,className:"size-full object-cover",src:u?.url,autoPlay:!0,muted:!0,loop:!0}),e("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 A=h(S);export{A as default};
|
|
1
|
+
"use client";import{Fragment as p,jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as b,useRef as N,useEffect as k}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import w from"../Slogan/index.js";import{Grid as n,GridItem as a}from"../../components/gird.js";import{Container as l}from"../../components/container.js";import x from"../BrandEquity/index.js";import G from"../MemberEquity/index.js";import{gsap as c}from"gsap";import M from"gsap/dist/ScrollTrigger.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";const C=({children:s,id:r,components:i})=>(k(()=>{const t=window.screen.height;c.registerPlugin(M),c.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${t*1.8}px bottom`,markers:!0,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:r,className:"relative z-10",children:[e(p,{children:s}),e(p,{children:i?.map(t=>{switch(t.blockType){case"ipc-brand-equity":return e("div",{className:"bg-[#1D1D1F]",children:e(l,{className:"!my-0",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(x,{data:t})}),e(a,{span:1})]})})});case"ipc-member-equity":return e("div",{className:"w-full bg-[#1D1D1F] py-10",children:e(l,{className:"!my-0",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(G,{data:t,className:"w-full"})}),e(a,{span:1})]})})});default:return null}})})]})),S=({className:s="",id:r,data:{title:i,videoTitle:t,btnText:R,img:z,video:u,theme:m,shape:y,components:f}})=>{const[B,I]=b(!1),g=N(null),v=typeof i=="string"?i:i&&d({data:i});return typeof t=="string"||t&&d({data:t}),e(C,{id:r,components:f,children:o("div",{className:P("relative w-full h-screen",s,{"aiui-dark":m==="dark","rounded-box":y==="rounded"}),children:[e("div",{className:"media-content absolute w-full left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2",children:e(l,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:o(n,{children:[e(a,{span:1}),e(a,{span:10,children:e(w,{className:"sticky-title",data:{title:v||"",theme:m}})}),e(a,{span:1})]})})}),o("div",{className:"media-cover w-full h-screen relative overflow-hidden",children:[e("video",{ref:g,className:"size-full object-cover",src:u?.url,autoPlay:!0,muted:!0,loop:!0}),e("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 A=h(S);export{A as default};
|
|
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 { gsap } from 'gsap'\nimport ScrollTrigger from 'gsap/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": "aAuDM,mBAAAA,EAAA,OAAAC,EAQc,QAAAC,MARd,oBAtDN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,MAAiB,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAS,QAAAC,MAAY,OACrB,OAAOC,MAAmB,
|
|
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'\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
6
|
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "gsap", "ScrollTrigger", "convertLexicalToHTML", "StickyBox", "children", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as R}from"react/jsx-runtime";import o,{useRef as E}from"react";import{useGSAP as z}from"@gsap/react";import{gsap as y}from"gsap";import I from"gsap/SplitText.js";import b from"gsap/ScrollTrigger.js";import{cn as S}from"../../helpers/utils.js";import{Heading as L,Text as U}from"../../components/index.js";import{withStyles as Y}from"../../shared/Styles.js";y.registerPlugin(I,b);function q(i=[],p=3){const c=[];for(let r=0;r<i.length;r+=p)c.push(i.slice(r,r+p));return c}const G=o.forwardRef(({data:i,className:p=""},c)=>{const{title:r,features:u=[],featureChunkSize:T=3,theme:k}=i,[d,D]=o.useState(0),[F,x]=o.useState(!0),f=q(u,T),h=f.length,n=u.length>T,M=n?[...f,f[0]]:f,w=40;o.useEffect(()=>{if(!n)return;const t=setInterval(()=>{D(e=>e+1),x(!0)},3e3);return()=>clearInterval(t)},[h,n]),o.useEffect(()=>{if(n)if(d===h){const t=setTimeout(()=>{x(!1),D(0)},500);return()=>clearTimeout(t)}else x(!0)},[d,h,n]);const l=E(null),m=E(null);return z(()=>{if(!l.current)return;m.current=new I(l.current,{type:"words",wordsClass:"word"});const t=l.current?.clientHeight||100,e=m.current.words;return y.set(e,{opacity:0}),b.create({trigger:l.current,start:"bottom bottom",end:`bottom bottom-=${t+40}px`,scrub:!0,onUpdate:a=>{const g=a.progress,N=e.length,P=1/N,H=.5;e.forEach(($,A)=>{const C=A/N*(1-H),j=P*(1+H);let v=(g-C)/j;v=Math.max(0,Math.min(v,1)),y.set($,{opacity:v})})}}),()=>{m.current&&m.current.revert(),b.getAll().forEach(a=>a.kill())}},[]),R("div",{ref:c,className:S("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",p),children:[s(L,{ref:l,as:"h2",size:2,weight:"bold",align:"left",className:S("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":k!=="dark","text-[#fff]":k==="dark"}),children:r}),u&&u.length>0&&s("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${w}px`},children:s("div",{className:S(["flex flex-col",F?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:M.map((t,e)=>s("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${w}px`},children:t.map((a,g)=>R(o.Fragment,{children:[g>0&&s("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),s(U,{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:a.title})]},g))},e))})})]})});G.displayName="Slogan";var Z=Y(G);export{Z as default};
|
|
1
|
+
"use client";import{jsx as s,jsxs as R}from"react/jsx-runtime";import o,{useRef as E}from"react";import{useGSAP as z}from"@gsap/react";import{gsap as y}from"gsap";import I from"gsap/dist/SplitText.js";import b from"gsap/dist/ScrollTrigger.js";import{cn as S}from"../../helpers/utils.js";import{Heading as L,Text as U}from"../../components/index.js";import{withStyles as Y}from"../../shared/Styles.js";y.registerPlugin(I,b);function q(i=[],p=3){const c=[];for(let r=0;r<i.length;r+=p)c.push(i.slice(r,r+p));return c}const G=o.forwardRef(({data:i,className:p=""},c)=>{const{title:r,features:u=[],featureChunkSize:T=3,theme:k}=i,[d,D]=o.useState(0),[F,x]=o.useState(!0),f=q(u,T),h=f.length,n=u.length>T,M=n?[...f,f[0]]:f,w=40;o.useEffect(()=>{if(!n)return;const t=setInterval(()=>{D(e=>e+1),x(!0)},3e3);return()=>clearInterval(t)},[h,n]),o.useEffect(()=>{if(n)if(d===h){const t=setTimeout(()=>{x(!1),D(0)},500);return()=>clearTimeout(t)}else x(!0)},[d,h,n]);const l=E(null),m=E(null);return z(()=>{if(!l.current)return;m.current=new I(l.current,{type:"words",wordsClass:"word"});const t=l.current?.clientHeight||100,e=m.current.words;return y.set(e,{opacity:0}),b.create({trigger:l.current,start:"bottom bottom",end:`bottom bottom-=${t+40}px`,scrub:!0,onUpdate:a=>{const g=a.progress,N=e.length,P=1/N,H=.5;e.forEach(($,A)=>{const C=A/N*(1-H),j=P*(1+H);let v=(g-C)/j;v=Math.max(0,Math.min(v,1)),y.set($,{opacity:v})})}}),()=>{m.current&&m.current.revert(),b.getAll().forEach(a=>a.kill())}},[]),R("div",{ref:c,className:S("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",p),children:[s(L,{ref:l,as:"h2",size:2,weight:"bold",align:"left",className:S("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":k!=="dark","text-[#fff]":k==="dark"}),children:r}),u&&u.length>0&&s("div",{className:"relative w-full max-w-[500px] overflow-hidden",style:{height:`${w}px`},children:s("div",{className:S(["flex flex-col",F?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:M.map((t,e)=>s("div",{className:"flex w-full flex-row items-stretch gap-3 overflow-hidden",style:{height:`${w}px`},children:t.map((a,g)=>R(o.Fragment,{children:[g>0&&s("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),s(U,{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:a.title})]},g))},e))})})]})});G.displayName="Slogan";var Z=Y(G);export{Z as default};
|
|
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 { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/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": "aAqGM,cAAAA,EAkCY,QAAAC,MAlCZ,oBApGN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAOC,MAAe,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\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": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "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", "Slogan_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as o}from"react/jsx-runtime";import m,{useState as t}from"react";import{cn as d}from"../../helpers/utils.js";import{Swiper as u,SwiperSlide as c}from"swiper/react";import{Navigation as S,FreeMode as x,Mousewheel as B}from"swiper/modules";const i=m.forwardRef(({data:s,breakpoints:
|
|
1
|
+
"use client";import{jsx as o}from"react/jsx-runtime";import m,{useState as t}from"react";import{cn as d}from"../../helpers/utils.js";import{Swiper as u,SwiperSlide as c}from"swiper/react";import{Navigation as S,FreeMode as x,Mousewheel as B}from"swiper/modules";const i=m.forwardRef(({data:s,breakpoints:n,Slide:p,className:a,id:r})=>{const[g,l]=t(!0),[M,f]=t(!1);return o(u,{className:d(a),navigation:{nextEl:`.${r}-custom-swiper-button-next`,prevEl:`.${r}-custom-swiper-button-prev`},onProgress:e=>{l(e.isBeginning),f(e.isEnd)},modules:[S,x,B],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:n||{0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,freeMode:!1,slidesPerView:2.3},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},children:s?.list?.map((e,w)=>o(c,{className:"!flex !h-[unset]",children:o(p,{data:e,configuration:s?.configuration})},r+"SwiperSlide"+w))})});i.displayName="SwiperBox";var N=i;export{N as default};
|
|
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": "aAmDU,cAAAA,MAAA,oBAlDV,OAAOC,GAAS,YAAAC,MAAgB,QAChC,OAAS,MAAAC,MAAU,yBAGnB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBAGjD,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,EAAId,EAAS,EAAI,EACnC,CAACe,EAAOC,CAAM,EAAIhB,EAAS,EAAK,EAEtC,OACEF,EAACI,EAAA,CACC,UAAWD,EAAGU,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,CAACb,EAAYC,EAAUC,CAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACEG,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": "aAmDU,cAAAA,MAAA,oBAlDV,OAAOC,GAAS,YAAAC,MAAgB,QAChC,OAAS,MAAAC,MAAU,yBAGnB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBAGjD,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,EAAId,EAAS,EAAI,EACnC,CAACe,EAAOC,CAAM,EAAIhB,EAAS,EAAK,EAEtC,OACEF,EAACI,EAAA,CACC,UAAWD,EAAGU,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,CAACb,EAAYC,EAAUC,CAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACEG,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,IACtBrB,EAACK,EAAA,CAA8C,UAAU,mBACvD,SAAAL,EAACY,EAAA,CAAM,KAAMQ,EAAM,cAAeV,GAAM,cAAe,GADvCI,EAAK,cAAgBO,CAEvC,CACD,EACH,CAEJ,CAAC,EAEDZ,EAAU,YAAc,YAExB,IAAOa,EAAQb",
|
|
6
6
|
"names": ["jsx", "React", "useState", "cn", "Swiper", "SwiperSlide", "Navigation", "FreeMode", "Mousewheel", "SwiperBox", "data", "breakpoints", "Slide", "className", "id", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex", "SwiperBox_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as E}from"@gsap/react";import{gsap as i}from"gsap";import p from"gsap/SplitText.js";import n from"gsap/ScrollTrigger.js";import{cn as M}from"../../helpers/utils.js";import{Heading as P}from"../../components/index.js";import{withStyles as R}from"../../shared/Styles.js";i.registerPlugin(p,n);const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return E(()=>{if(!t.current)return;const T=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return i.set(e,{opacity:0}),n.create({trigger:t.current,start:"bottom bottom",end:`bottom bottom+=${T+20}px`,scrub:!0,onUpdate:o=>{const w=o.progress,c=e.length,b=1/c,a=.5;e.forEach((y,x)=>{const v=x/c*(1-a),H=b*(1+a);let s=(w-v)/H;s=Math.max(0,Math.min(s,1)),i.set(y,{opacity:s})})}}),()=>{r.current&&r.current.revert(),n.getAll().forEach(o=>o.kill())}},[]),l&&f("div",{className:M("tablet:mb-[32px] mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(P,{ref:t,as:"h2",size:5,html:l})})});u.displayName="Title";var I=R(u);export{I as default};
|
|
1
|
+
"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as E}from"@gsap/react";import{gsap as i}from"gsap";import p from"gsap/dist/SplitText.js";import n from"gsap/dist/ScrollTrigger.js";import{cn as M}from"../../helpers/utils.js";import{Heading as P}from"../../components/index.js";import{withStyles as R}from"../../shared/Styles.js";i.registerPlugin(p,n);const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),r=m(null);return E(()=>{if(!t.current)return;const T=t.current?.clientHeight||80;r.current=new p(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return i.set(e,{opacity:0}),n.create({trigger:t.current,start:"bottom bottom",end:`bottom bottom+=${T+20}px`,scrub:!0,onUpdate:o=>{const w=o.progress,c=e.length,b=1/c,a=.5;e.forEach((y,x)=>{const v=x/c*(1-a),H=b*(1+a);let s=(w-v)/H;s=Math.max(0,Math.min(s,1)),i.set(y,{opacity:s})})}}),()=>{r.current&&r.current.revert(),n.getAll().forEach(o=>o.kill())}},[]),l&&f("div",{className:M("tablet:mb-[32px] mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(P,{ref:t,as:"h2",size:5,html:l})})});u.displayName="Title";var I=R(u);export{I as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Title/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/SplitText.js'\nimport ScrollTrigger from 'gsap/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\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 + 20}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 title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
-
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAOC,MAAe,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport SplitText from 'gsap/dist/SplitText.js'\nimport ScrollTrigger from 'gsap/dist/ScrollTrigger.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\ngsap.registerPlugin(SplitText, ScrollTrigger)\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n const { title, theme } = data\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n useGSAP(() => {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\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 + 20}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 title && (\n <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
|
|
5
|
+
"mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAOC,MAAe,yBACtB,OAAOC,MAAmB,6BAC1B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3BL,EAAK,eAAeC,EAAWC,CAAa,EAC5C,MAAMI,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,EAAWb,EAA2B,IAAI,EAC1Cc,EAAoBd,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CACZ,GAAI,CAACY,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIX,EAAUU,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAZ,EAAK,IAAIc,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BZ,EAAc,OAAO,CACnB,QAASS,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,EAAMC,IAAM,CACzB,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CxB,EAAK,IAAIoB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DV,EAAc,OAAO,EAAE,QAAQuB,GAAKA,EAAE,KAAK,CAAC,CAC9C,CACF,EAAG,CAAC,CAAC,EAGHhB,GACEb,EAAC,OAAI,UAAWO,EAAG,uCAAwCK,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,SAAAd,EAACQ,EAAA,CAAQ,IAAKO,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDH,EAAM,YAAc,QAEpB,IAAOoB,EAAQrB,EAAWC,CAAK",
|
|
6
6
|
"names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
|
|
7
7
|
}
|
package/dist/esm/libs.d.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/libs.d.ts"],
|
|
4
|
-
"sourcesContent": ["declare module 'gsap/SplitText.js' {\n import { SplitText } from 'gsap/SplitText'\n export default SplitText\n}\n\ndeclare module 'gsap/ScrollTrigger.js' {\n import { ScrollTrigger } from 'gsap/ScrollTrigger'\n export default ScrollTrigger\n}\n"],
|
|
4
|
+
"sourcesContent": ["declare module 'gsap/dist/SplitText.js' {\n import { SplitText } from 'gsap/dist/SplitText'\n export default SplitText\n}\n\ndeclare module 'gsap/dist/ScrollTrigger.js' {\n import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n export default ScrollTrigger\n}\n"],
|
|
5
5
|
"mappings": "8DAAA,IAAAA,EAAAC,EAAA",
|
|
6
6
|
"names": ["require_libs_d", "__commonJSMin"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"../biz-components/MediaPlayerMulti/index.js";const e=[{name:"MKBHD",description:"18.2 Million Youtube subscribers",quote:'"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like."',img:{url:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110",alt:"MKBHD"},video:{url:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}},{name:"Unbox Therapy",description:"18.2 Million Youtube subscribers",quote:'"I highly recommend the Anker Nano Pro. This truly is a no-brainer."',img:{url:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094",alt:"Unbox Therapy"},video:{url:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}}],o={title:"Biz-Components/MediaPlayerMulti",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=o;const s={args:{data:{items:e}}},c={args:{data:{items:e?.concat(e)}}};export{s as Default,c as Multi,i as default};
|
|
1
|
+
import t from"../biz-components/MediaPlayerMulti/index.js";const e=[{title:"MKBHD",name:"MKBHD",description:"18.2 Million Youtube subscribers",quote:'"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like."',img:{url:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110",alt:"MKBHD"},video:{url:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}},{title:"Unbox Therapy",name:"Unbox Therapy",description:"18.2 Million Youtube subscribers",quote:'"I highly recommend the Anker Nano Pro. This truly is a no-brainer."',img:{url:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094",alt:"Unbox Therapy"},video:{url:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}}],o={title:"Biz-Components/MediaPlayerMulti",component:t,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=o;const s={args:{data:{items:e}}},c={args:{data:{items:e?.concat(e)}}};export{s as Default,c as Multi,i as default};
|
|
2
2
|
//# sourceMappingURL=mediaplayerMulti.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/mediaplayerMulti.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaPlayerMulti from '../biz-components/MediaPlayerMulti/index.js'\n\nconst testimonialItems = [\n {\n name: 'MKBHD',\n description: '18.2 Million Youtube subscribers',\n quote:\n '\"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110',\n alt: 'MKBHD',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n {\n name: 'Unbox Therapy',\n description: '18.2 Million Youtube subscribers',\n quote: '\"I highly recommend the Anker Nano Pro. This truly is a no-brainer.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094',\n alt: 'Unbox Therapy',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n]\n\nconst meta = {\n title: 'Biz-Components/MediaPlayerMulti',\n component: MediaPlayerMulti,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof MediaPlayerMulti>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n items: testimonialItems,\n },\n },\n}\n\nexport const Multi: Story = {\n args: {\n data: {\n items: testimonialItems?.concat(testimonialItems),\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "AACA,OAAOA,MAAsB,8CAE7B,MAAMC,EAAmB,CACvB,CACE,KAAM,QACN,YAAa,mCACb,MACE,mIACF,IAAK,CACH,IAAK,gJACL,IAAK,OACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,EACA,CACE,KAAM,gBACN,YAAa,mCACb,MAAO,uEACP,IAAK,CACH,IAAK,gJACL,IAAK,eACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAWF,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOG,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAOH,CACT,CACF,CACF,EAEaI,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAOJ,GAAkB,OAAOA,CAAgB,CAClD,CACF,CACF",
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaPlayerMulti from '../biz-components/MediaPlayerMulti/index.js'\n\nconst testimonialItems = [\n {\n title: 'MKBHD',\n name: 'MKBHD',\n description: '18.2 Million Youtube subscribers',\n quote:\n '\"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110',\n alt: 'MKBHD',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n {\n title: 'Unbox Therapy',\n name: 'Unbox Therapy',\n description: '18.2 Million Youtube subscribers',\n quote: '\"I highly recommend the Anker Nano Pro. This truly is a no-brainer.\"',\n img: {\n url: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094',\n alt: 'Unbox Therapy',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n },\n },\n]\n\nconst meta = {\n title: 'Biz-Components/MediaPlayerMulti',\n component: MediaPlayerMulti,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof MediaPlayerMulti>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n data: {\n items: testimonialItems,\n },\n },\n}\n\nexport const Multi: Story = {\n args: {\n data: {\n items: testimonialItems?.concat(testimonialItems),\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAOA,MAAsB,8CAE7B,MAAMC,EAAmB,CACvB,CACE,MAAO,QACP,KAAM,QACN,YAAa,mCACb,MACE,mIACF,IAAK,CACH,IAAK,gJACL,IAAK,OACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,EACA,CACE,MAAO,gBACP,KAAM,gBACN,YAAa,mCACb,MAAO,uEACP,IAAK,CACH,IAAK,gJACL,IAAK,eACP,EACA,MAAO,CACL,IAAK,2EACP,CACF,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAWF,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOG,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAOH,CACT,CACF,CACF,EAEaI,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAOJ,GAAkB,OAAOA,CAAgB,CAClD,CACF,CACF",
|
|
6
6
|
"names": ["MediaPlayerMulti", "testimonialItems", "meta", "mediaplayerMulti_stories_default", "Default", "Multi"]
|
|
7
7
|
}
|