@anker-in/headless-ui 0.0.27-alpha.41 → 0.0.27-alpha.43
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/AccordionCards/index.d.ts +2 -7
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js +6 -6
- package/dist/cjs/biz-components/MemberEquity/index.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/cjs/stories/accordionCards.stories.d.ts +2 -6
- package/dist/esm/biz-components/AccordionCards/index.d.ts +2 -7
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +6 -6
- package/dist/esm/biz-components/MemberEquity/index.js.map +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/dist/esm/stories/accordionCards.stories.d.ts +2 -6
- package/package.json +1 -1
- package/style.css +4 -3
|
@@ -8,6 +8,7 @@ type ItemType = {
|
|
|
8
8
|
};
|
|
9
9
|
/** 内容节点 */
|
|
10
10
|
subTitle: string;
|
|
11
|
+
link?: string;
|
|
11
12
|
};
|
|
12
13
|
type AccordionCardsType = {
|
|
13
14
|
className?: string;
|
|
@@ -22,12 +23,6 @@ type AccordionCardsType = {
|
|
|
22
23
|
/** 主按钮配置 */
|
|
23
24
|
primaryButton?: string;
|
|
24
25
|
};
|
|
25
|
-
/** 按钮事件*/
|
|
26
|
-
event?: {
|
|
27
|
-
primaryButton?: {
|
|
28
|
-
onClick: (v: any) => void;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
26
|
};
|
|
32
|
-
declare const AccordionCards: ({ data, className
|
|
27
|
+
declare const AccordionCards: ({ data, className }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
|
|
33
28
|
export default AccordionCards;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,s)=>{for(var n in s)m(t,n,{get:s[n],enumerable:!0})},h=(t,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of E(s))!C.call(t,d)&&d!==n&&m(t,d,{get:()=>s[d],enumerable:!(c=B(s,d))||c.enumerable});return t};var u=(t,s,n)=>(n=t!=null?T(M(t)):{},h(s||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),A=t=>h(m({},"__esModule",{value:!0}),t);var V={};I(V,{default:()=>S});module.exports=A(V);var e=require("react/jsx-runtime"),y=u(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=u(require("../../components/picture.js")),p=u(require("../../components/button.js")),g=u(require("../SwiperBox/index.js")),i=require("react");const L=({data:t,className:s=""})=>{const[n,c]=(0,i.useState)(0),[d,w]=(0,i.useState)({0:!0}),F=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),N=(o,r)=>{r&&(F.current[o]=r)},v=o=>{b.current?.[o]&&w({[o]:!0})};(0,i.useEffect)(()=>{const o=F.current;return o?.forEach((r,a)=>{a?r.style="flex: 1 1 0%; transition: all 0.15s":r.style="flex: 7 1 0%; transition: all 0.15s",r.addEventListener("transitionend",()=>v(a))}),()=>{o?.forEach((r,a)=>{r.removeEventListener("transitionend",()=>v(a))})}},[]);const k=({data:o,configuration:r})=>(0,e.jsxs)("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[(0,e.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mb-6 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,e.jsxs)(e.Fragment,{children:[t?.title&&(0,e.jsx)(y.default,{data:{title:t?.title}}),(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)("div",{className:(0,l.cn)("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:t?.products?.map((o,r)=>{const a=n===r;return(0,e.jsxs)("div",{style:{flex:a?7:1},ref:x=>{x&&N(r,x)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n!==r&&(b.current={[r]:!0},c(r))},children:[(0,e.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),d?.[r]&&a?(0,e.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[(0,e.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,e.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,e.jsx)("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,e.jsx)(p.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",t?.shape==="round"?"rounded-2xl":""),children:(0,e.jsx)("a",{href:o?.link,children:t?.primaryButton})})]}):null]},r)})})}),(0,e.jsx)("div",{className:"tablet:hidden block",children:(0,e.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,primaryButton:t?.primaryButton}},Slide:k,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var S=L;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n }\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_react", "AccordionCards", "data", "className", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style = 'flex: 7 1 0%; transition: all 0.15s'\n } else {\n item.style = 'flex: 1 1 0%; transition: all 0.15s'\n }\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div className=\"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n <div className=\"mb-6 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a href={data.link}>{configuration?.primaryButton}</a>\n </Button>\n </div>\n </div>\n )\n }\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className=\"tablet:block hidden\">\n <div\n className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 7 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onClick={() => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n {currentWidth?.[idx] && isExpanded ? (\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n )}\n >\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n {item?.title}\n </p>\n <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n data?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a href={item?.link}>{data?.primaryButton}</a>\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n primaryButton: data?.primaryButton,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_react", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "Title", "idx", "isExpanded", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},n=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!w.call(e,a)&&a!==r&&i(e,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return e};var l=(e,t,r)=>(r=e!=null?g(b(e)):{},n(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),h=e=>n(i({},"__esModule",{value:!0}),e);var N={};y(N,{default:()=>F});module.exports=h(N);var o=require("react/jsx-runtime"),k=require("react"),p=require("../../helpers/utils.js"),c=l(require("../../components/picture.js")),d=require("../../shared/Styles.js"),m=l(require("../Title/index.js")),f=l(require("../SwiperBox/index.js"));const C=({data:e,configuration:t})=>(0,o.jsxs)("div",{className:(0,p.cn)("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",t?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[(0,o.jsx)(c.default,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),(0,o.jsx)("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),v=({data:e,buildData:t,className:r="",key:s})=>(0,o.jsxs)("div",{className:(0,p.cn)("w-full",r),children:[e?.title&&(0,o.jsx)(m.default,{data:{title:e?.title}}),(0,o.jsx)(f.default,{className:"!overflow-visible",id:"Category"+s,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:C,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:5}}})]});var F=(0,d.withStyles)(v);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiCI,IAAAI,EAAA,6BAhCJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,oCAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAExC,QAAC,OACC,aAAW,MACT,+DACA,+DACAA,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,oBAAC,EAAAC,QAAA,CAAQ,UAAU,uEAAuE,OAAQF,GAAM,MAAO,KAC/G,OAAC,KAAE,UAAU,0DAA2D,SAAAA,GAAM,KAAK,GACrF,EAIEG,EAAoC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Category' + key}\n data={{ list: data?.products, configuration: { shape: data?.shape } }}\n Slide={CategoryItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 5,\n },\n }}\n />\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiCI,IAAAI,EAAA,6BAhCJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAC3BC,EAAkB,gCAClBC,EAAsB,oCAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAExC,QAAC,OACC,aAAW,MACT,+DACA,+DACAA,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,oBAAC,EAAAC,QAAA,CAAQ,UAAU,uEAAuE,OAAQF,GAAM,MAAO,KAC/G,OAAC,KAAE,UAAU,0DAA2D,SAAAA,GAAM,KAAK,GACrF,EAIEG,EAAoC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,OAE9E,QAAC,OAAI,aAAW,MAAG,SAAUD,CAAS,EACnC,UAAAL,GAAM,UAAS,OAAC,EAAAO,QAAA,CAAM,KAAM,CAAE,MAAOP,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAQ,QAAA,CACC,UAAU,oBACV,GAAI,WAAaF,EACjB,KAAM,CAAE,KAAMN,GAAM,SAAU,cAAe,CAAE,MAAOA,GAAM,KAAM,CAAE,EACpE,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EAIJ,IAAOT,KAAQ,cAAWa,CAAQ",
|
|
6
6
|
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperBox", "CategoryItem", "data", "configuration", "Picture", "Category", "buildData", "className", "key", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var N=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(t,a)=>{for(var p in a)i(t,p,{get:a[p],enumerable:!0})},u=(t,a,p,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of B(a))!H.call(t,o)&&o!==p&&i(t,o,{get:()=>a[o],enumerable:!(s=k(a,o))||s.enumerable});return t};var j=(t,a,p)=>(p=t!=null?N(w(t)):{},u(a||!t||!t.__esModule?i(p,"default",{value:t,enumerable:!0}):p,t)),P=t=>u(i({},"__esModule",{value:!0}),t);var F={};z(F,{default:()=>R});module.exports=P(F);var e=require("react/jsx-runtime"),m=j(require("react")),l=require("../../components/index.js"),r=require("../../helpers/index.js"),f=require("../../shared/Styles.js");const g=m.default.forwardRef(({data:t,className:a},p)=>{const{title:s,subtitle:o,pcImage:b,mobileImage:h,primaryButton:c,secondaryButton:x,theme:v="light",products:n=[]}=t;return(0,e.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:p,className:(0,r.cn)(v==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,e.jsx)(l.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${b.url} , ${h.url} 767`}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[
|
|
1
|
+
"use strict";"use client";var N=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(t,a)=>{for(var p in a)i(t,p,{get:a[p],enumerable:!0})},u=(t,a,p,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of B(a))!H.call(t,o)&&o!==p&&i(t,o,{get:()=>a[o],enumerable:!(s=k(a,o))||s.enumerable});return t};var j=(t,a,p)=>(p=t!=null?N(w(t)):{},u(a||!t||!t.__esModule?i(p,"default",{value:t,enumerable:!0}):p,t)),P=t=>u(i({},"__esModule",{value:!0}),t);var F={};z(F,{default:()=>R});module.exports=P(F);var e=require("react/jsx-runtime"),m=j(require("react")),l=require("../../components/index.js"),r=require("../../helpers/index.js"),f=require("../../shared/Styles.js");const g=m.default.forwardRef(({data:t,className:a},p)=>{const{title:s,subtitle:o,pcImage:b,mobileImage:h,primaryButton:c,secondaryButton:x,theme:v="light",products:n=[]}=t;return(0,e.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:p,className:(0,r.cn)(v==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,e.jsx)(l.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${b.url} , ${h.url} 767`}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[s&&(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px] space-y-4 text-center",children:[(0,e.jsx)(l.Heading,{as:"h1",size:5,className:(0,r.cn)("hero-banner-title"),html:s}),(0,e.jsx)(l.Text,{className:(0,r.cn)("hero-banner-subtitle laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px]"),html:o})]}),(0,e.jsxs)("div",{className:"laptop:justify-start flex items-center justify-center gap-4",children:[x&&(0,e.jsx)(l.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:x.text}),c&&(0,e.jsx)(l.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:c.text})]})]}),n.length>0&&(0,e.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:n.map((y,d)=>(0,e.jsxs)(m.default.Fragment,{children:[(0,e.jsx)(l.Text,{className:(0,r.cn)("hero-banner-product-text lg-desktop:text-[14px] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]"),html:y.title}),d<n.length-1&&(0,e.jsx)("div",{className:(0,r.cn)("bg-info-primary w-px")})]},d))})]})});g.displayName="HeroBanner";var R=(0,f.withStyles)(g);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBM,IAAAI,EAAA,6BAnBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAElH,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKE,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,WACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGI,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,KAGA,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n {title && (\n <div className=\"laptop:text-left max-w-[686px] space-y-4 text-center\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n <Text\n className={cn('hero-banner-subtitle laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px]')}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start flex items-center justify-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]'\n )}\n html={product.title}\n />\n {index < products.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBM,IAAAI,EAAA,6BAnBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAElH,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKE,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,WACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGI,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,KAGA,QAAC,OAAI,UAAU,6LACZ,UAAAH,MACC,QAAC,OAAI,UAAU,uDACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,KAC3E,OAAC,QACC,aAAW,MAAG,oEAAoE,EAClF,KAAMC,EACR,GACF,KAGF,QAAC,OAAI,UAAU,8DACZ,UAAAI,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,uKACZ,SAAAA,EAAS,IAAI,CAACC,EAASC,OACtB,QAAC,EAAAb,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,0GACF,EACA,KAAMY,EAAQ,MAChB,EACCC,EAAQF,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IAPzDE,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDd,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "products", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";"use client";var r=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var
|
|
2
|
-
aspect-[390/480] overflow-hidden`,t,{"aiui-dark":u==="dark","rounded-box":b==="rounded"}),children:[(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:o?.url,type:"video/mp4"})}),(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
flex w-full items-
|
|
1
|
+
"use strict";"use client";var r=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var k=(a,t)=>{for(var p in t)r(a,p,{get:t[p],enumerable:!0})},h=(a,t,p,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of x(t))!f.call(a,o)&&o!==p&&r(a,o,{get:()=>t[o],enumerable:!(i=v(t,o))||i.enumerable});return a};var N=a=>h(r({},"__esModule",{value:!0}),a);var C={};k(C,{default:()=>B});module.exports=N(C);var e=require("react/jsx-runtime"),w=require("react"),l=require("../../components/index.js"),d=require("../../shared/Styles.js"),s=require("../../helpers/utils.js");const q=({data:a,className:t=""})=>{const{title:p,description:i,backgroundImage:o,mobileBackgroundImage:m,primaryButton:n,secondaryButton:c,theme:u,shape:b}=a,y=()=>{},g=()=>{};return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,s.cn)(`tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative
|
|
2
|
+
aspect-[390/480] overflow-hidden`,t,{"aiui-dark":u==="dark","rounded-box":b==="rounded"}),children:[(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:o?.url,type:"video/mp4"})}),(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}),(0,e.jsx)("div",{className:`
|
|
3
|
+
laptop:items-center
|
|
4
|
+
absolute
|
|
5
|
+
inset-0 flex w-full items-end
|
|
6
6
|
`,children:(0,e.jsxs)("div",{className:`
|
|
7
7
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
|
|
8
8
|
desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
|
|
9
|
-
`,children:[(0,e.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,e.jsx)(l.Heading,{as:"h2",size:
|
|
9
|
+
`,children:[(0,e.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,e.jsx)(l.Heading,{as:"h2",size:3,className:"member-equity-title ",html:p}),(0,e.jsx)(l.Text,{size:2,className:"member-equity-description",html:i})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{variant:"secondary",onClick:g,className:(0,s.cn)("member-equity-button-secondary"),children:c.text}),(0,e.jsx)(l.Button,{variant:"primary",onClick:y,className:(0,s.cn)("member-equity-button-primary"),children:n.text})]})]})})]})};var B=(0,d.withStyles)(q);
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative\n aspect-[390/480] overflow-hidden`,\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n <div\n className={`\n laptop:items-center \n absolute\n inset-0 flex w-full items-end\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary')}\n >\n {secondaryButton.text}\n </Button>\n <Button variant=\"primary\" onClick={handleButtonPrimaryClick} className={cn('member-equity-button-primary')}>\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
5
|
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgCQ,IAAAI,EAAA,6BA/BRC,EAAkB,iBAClBC,EAAsC,qCACtCC,EAA2B,kCAE3BC,EAAmB,kCAEnB,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAC/GT,EACIU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT;AAAA,0CAEAV,EACA,CACE,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,oBAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,mBAAC,UAAO,IAAKL,GAAiB,IAAK,KAAK,YAAY,EACtD,KACA,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKC,GAAuB,IAAK,KAAK,YAAY,EAC5D,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA,QAMX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,YACR,QAASQ,EACT,aAAW,MAAG,gCAAgC,EAE7C,SAAAJ,EAAgB,KACnB,KACA,OAAC,UAAO,QAAQ,UAAU,QAASG,EAA0B,aAAW,MAAG,8BAA8B,EACtG,SAAAJ,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOd,KAAQ,cAAWO,CAAY",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var M=Object.create;var
|
|
1
|
+
"use strict";var M=Object.create;var k=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var H=(a,l)=>{for(var i in l)k(a,i,{get:l[i],enumerable:!0})},g=(a,l,i,d)=>{if(l&&typeof l=="object"||typeof l=="function")for(let m of R(l))!z.call(a,m)&&m!==i&&k(a,m,{get:()=>l[m],enumerable:!(d=P(l,m))||d.enumerable});return a};var N=(a,l,i)=>(i=a!=null?M(S(a)):{},g(l||!a||!a.__esModule?k(i,"default",{value:a,enumerable:!0}):i,a)),$=a=>g(k({},"__esModule",{value:!0}),a);var E={};H(E,{default:()=>D});module.exports=$(E);var e=require("react/jsx-runtime"),T=N(require("react")),v=require("../../shared/Styles.js"),I=N(require("../../components/picture.js")),x=N(require("../../components/button.js")),B=require("../../components/heading.js"),G=require("../../components/text.js"),o=require("../../components/carousel.js"),c=require("../../components/gird.js"),w=N(require("../Title/index.js")),L=require("../../helpers/utils.js"),u=require("../../components/tabs.js");const h=({item:a,shape:l="square"})=>{const{theme:i="light",title:d,description:m,imageUrl:p,primaryButton:r,secondaryButton:f}=a;return(0,e.jsxs)("div",{className:(0,L.cn)("item-wrapper relative w-full",{"rounded-box":l==="rounded","aiui-dark":i==="dark"},"text-info-primary"),children:[(0,e.jsx)(I.default,{source:p?.url,className:"inset-0",style:{aspectRatio:`${p?.width}/${p?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(B.Heading,{size:3,className:"item-title",html:d}),(0,e.jsx)(G.Text,{size:2,className:"item-description",html:m})]}),(0,e.jsxs)("div",{className:"flex gap-[16px]",children:[f&&(0,e.jsx)(x.default,{variant:"secondary",asChild:!0,children:(0,e.jsx)("a",{href:f.link,children:f.text})}),r&&(0,e.jsx)(x.default,{variant:"primary",asChild:!0,children:(0,e.jsx)("a",{href:r.link,children:r.text})})]})]})]})},q=T.default.forwardRef((a,l)=>{const{shape:i,sectionTitle:d,groupByTab:m=!1,items:p=[],carousel:r}=a.data,f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},y=p.map(t=>t.tabName).filter(Boolean).filter((t,s,n)=>n.indexOf(t)===s),C=y.map(t=>({tabName:t,items:p.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[d&&(0,e.jsx)(w.default,{data:{title:d},className:"section-title"}),m?(0,e.jsxs)(u.Tabs,{shape:i,align:"left",defaultValue:y[0],children:[(0,e.jsx)(u.TabsList,{children:y.map((t,s)=>(0,e.jsx)(u.TabsTrigger,{value:t,children:t},s))}),y.map((t,s)=>(0,e.jsx)(u.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(c.Grid,{className:"w-full",children:[C[t].map((n,b)=>(0,e.jsx)(c.GridItem,{span:f(n.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(h,{item:n})},b)),(0,e.jsx)(c.GridItem,{className:"laptop:hidden block",span:12,children:(0,e.jsx)(o.Carousel,{className:"",children:(0,e.jsx)(o.CarouselContent,{className:"flex",children:C[t].map((n,b)=>(0,e.jsx)(o.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(h,{item:n,shape:i})},b))})})})]}),r&&r?.items.length>0?(0,e.jsx)(o.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(o.CarouselContent,{className:"flex",children:r.items.map((n,b)=>(0,e.jsx)(o.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(h,{item:n,shape:i})},b))})}):null]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(c.Grid,{className:"w-full",children:[p.map((t,s)=>(0,e.jsx)(c.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(h,{item:t})},s)),p.map((t,s)=>(0,e.jsx)(c.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(h,{item:t})},s))]}),r&&r?.items.length>0?(0,e.jsx)(o.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(o.CarouselContent,{className:"flex",children:r.items.map((t,s)=>(0,e.jsx)(o.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(h,{item:t,shape:i})},s))})}):null]})]})});var D=(0,v.withStyles)(q);
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({ item, shape = 'square' }: { item: Item } & { shape?: Shape }) => {\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n\n return (\n <div\n className={cn(\n `item-wrapper relative w-full`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n },\n 'text-info-primary'\n )}\n >\n <Picture
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BM,IAAAI,EAAA,6BA3BNC,EAAkB,oBAElBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAwD,wCACxDC,EAA+B,oCAC/BC,EAAkB,gCAElBC,EAAmB,kCACnBC,EAAyD,oCACzD,MAAMC,EAAY,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAQ,QAAS,IAA0C,CACpF,KAAM,CAAE,MAAAC,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,CAAgB,EAAIP,EAE1F,SACE,QAAC,OACC,aAAW,MACT,+BACA,CACE,cAAeC,IAAU,UACzB,YAAaC,IAAU,MACzB,EACA,mBACF,EAEA,oBAAC,EAAAM,QAAA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({ item, shape = 'square' }: { item: Item } & { shape?: Shape }) => {\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n\n return (\n <div\n className={cn(\n `item-wrapper relative w-full`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n },\n 'text-info-primary'\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={2} className=\"item-description\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryButton.link}>{secondaryButton.text}</a>\n </Button>\n )}\n {primaryButton && (\n <Button variant=\"primary\" asChild>\n <a href={primaryButton.link}>{primaryButton.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')} className=\"laptop:block hidden\">\n <ItemBlock item={item} />\n </GridItem>\n ))}\n {\n <GridItem className=\"laptop:hidden block\" span={12}>\n <Carousel className=\"\">\n <CarouselContent className=\"flex\">\n {tabItemsMaps[tabName].map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n </GridItem>\n }\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')} className=\"laptop:block hidden\">\n <ItemBlock item={item} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock item={item} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "import_utils", "import_tabs", "ItemBlock", "item", "shape", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var f=Object.create;var l=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(e,o)=>{for(var p in o)l(e,p,{get:o[p],enumerable:!0})},i=(e,o,p,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of h(o))!v.call(e,t)&&t!==p&&l(e,t,{get:()=>o[t],enumerable:!(a=C(o,t))||a.enumerable});return e};var
|
|
1
|
+
"use strict";var f=Object.create;var l=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(e,o)=>{for(var p in o)l(e,p,{get:o[p],enumerable:!0})},i=(e,o,p,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of h(o))!v.call(e,t)&&t!==p&&l(e,t,{get:()=>o[t],enumerable:!(a=C(o,t))||a.enumerable});return e};var N=(e,o,p)=>(p=e!=null?f(k(e)):{},i(o||!e||!e.__esModule?l(p,"default",{value:e,enumerable:!0}):p,e)),R=e=>i(l({},"__esModule",{value:!0}),e);var u={};b(u,{Container:()=>m});module.exports=R(u);var r=require("react/jsx-runtime"),d=N(require("react")),n=require("../helpers/utils.js"),c=require("@radix-ui/react-slot");const m=d.default.forwardRef(({...e},o)=>{const{asChild:p,children:a,className:t,overflow:y,...s}=e,x=p?c.Slot:"div";return y==="hidden"?(0,r.jsx)("div",{className:(0,n.cn)("overflow-hidden","tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",t),children:(0,r.jsx)(x,{className:(0,n.cn)("mx-auto box-border w-full max-w-[1772px]","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8"),...s,ref:o,children:a})}):(0,r.jsx)(x,{...s,ref:o,className:(0,n.cn)("mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-8","tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",t),children:a})});m.displayName="Container";
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n overflow?: 'hidden'\n} & React.ComponentPropsWithoutRef<'div'>\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { asChild, children, className, overflow, ...containerProps } = props\n const Comp = asChild ? Slot : 'div'\n\n if (overflow === 'hidden') {\n return (\n <div\n className={cn(\n 'overflow-hidden',\n 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n className\n )}\n >\n <Comp\n className={cn(\n 'mx-auto box-border w-full max-w-[1772px]',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8'\n )}\n {...containerProps}\n ref={forwardedRef}\n >\n {children}\n </Comp>\n </div>\n )\n }\n return (\n <Comp\n {...containerProps}\n ref={forwardedRef}\n className={cn(\n 'mx-auto w-full
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAwBQ,IAAAI,EAAA,6BAxBRC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCASrB,MAAML,EAAY,EAAAM,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAe,EAAIN,EAChEO,EAAOL,EAAU,OAAO,MAE9B,OAAIG,IAAa,YAEb,OAAC,OACC,aAAW,MACT,kBACA,uFACAD,CACF,EAEA,mBAACG,EAAA,CACC,aAAW,MACT,2CACA,8DACF,EACC,GAAGD,EACJ,IAAKL,EAEJ,SAAAE,EACH,EACF,KAIF,OAACI,EAAA,CACE,GAAGD,EACJ,IAAKL,EACL,aAAW,MACT,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n overflow?: 'hidden'\n} & React.ComponentPropsWithoutRef<'div'>\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { asChild, children, className, overflow, ...containerProps } = props\n const Comp = asChild ? Slot : 'div'\n\n if (overflow === 'hidden') {\n return (\n <div\n className={cn(\n 'overflow-hidden',\n 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n className\n )}\n >\n <Comp\n className={cn(\n 'mx-auto box-border w-full max-w-[1772px]',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8'\n )}\n {...containerProps}\n ref={forwardedRef}\n >\n {children}\n </Comp>\n </div>\n )\n }\n return (\n <Comp\n {...containerProps}\n ref={forwardedRef}\n className={cn(\n 'mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-8',\n 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n className\n )}\n >\n {children}\n </Comp>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAwBQ,IAAAI,EAAA,6BAxBRC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCASrB,MAAML,EAAY,EAAAM,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAe,EAAIN,EAChEO,EAAOL,EAAU,OAAO,MAE9B,OAAIG,IAAa,YAEb,OAAC,OACC,aAAW,MACT,kBACA,uFACAD,CACF,EAEA,mBAACG,EAAA,CACC,aAAW,MACT,2CACA,8DACF,EACC,GAAGD,EACJ,IAAKL,EAEJ,SAAAE,EACH,EACF,KAIF,OAACI,EAAA,CACE,GAAGD,EACJ,IAAKL,EACL,aAAW,MACT,iBACA,8EACA,uFACAG,CACF,EAEC,SAAAD,EACH,CAEJ,CAAC,EAEDV,EAAU,YAAc",
|
|
6
6
|
"names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "React", "props", "forwardedRef", "asChild", "children", "className", "overflow", "containerProps", "Comp"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ data, className
|
|
4
|
+
component: ({ data, className }: {
|
|
5
5
|
className?: string;
|
|
6
6
|
data: {
|
|
7
7
|
key?: string;
|
|
@@ -12,16 +12,12 @@ declare const meta: {
|
|
|
12
12
|
url: string;
|
|
13
13
|
};
|
|
14
14
|
subTitle: string;
|
|
15
|
+
link?: string;
|
|
15
16
|
}>;
|
|
16
17
|
shape?: "round" | "square";
|
|
17
18
|
itemShape?: "round" | "square";
|
|
18
19
|
primaryButton?: string;
|
|
19
20
|
};
|
|
20
|
-
event?: {
|
|
21
|
-
primaryButton?: {
|
|
22
|
-
onClick: (v: any) => void;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
21
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
22
|
parameters: {
|
|
27
23
|
layout: string;
|
|
@@ -8,6 +8,7 @@ type ItemType = {
|
|
|
8
8
|
};
|
|
9
9
|
/** 内容节点 */
|
|
10
10
|
subTitle: string;
|
|
11
|
+
link?: string;
|
|
11
12
|
};
|
|
12
13
|
type AccordionCardsType = {
|
|
13
14
|
className?: string;
|
|
@@ -22,12 +23,6 @@ type AccordionCardsType = {
|
|
|
22
23
|
/** 主按钮配置 */
|
|
23
24
|
primaryButton?: string;
|
|
24
25
|
};
|
|
25
|
-
/** 按钮事件*/
|
|
26
|
-
event?: {
|
|
27
|
-
primaryButton?: {
|
|
28
|
-
onClick: (v: any) => void;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
26
|
};
|
|
32
|
-
declare const AccordionCards: ({ data, className
|
|
27
|
+
declare const AccordionCards: ({ data, className }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
|
|
33
28
|
export default AccordionCards;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as B,jsx as r,jsxs as l}from"react/jsx-runtime";import w from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import p from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as F,useEffect as k,useRef as b}from"react";const T=({data:o,className:i=""})=>{const[d,v]=F(0),[x,h]=F({0:!0}),a=b([]),c=b({0:!0}),y=(t,e)=>{e&&(a.current[t]=e)},m=t=>{c.current?.[t]&&h({[t]:!0})};k(()=>{const t=a.current;return t?.forEach((e,s)=>{s?e.style="flex: 1 1 0%; transition: all 0.15s":e.style="flex: 7 1 0%; transition: all 0.15s",e.addEventListener("transitionend",()=>m(s))}),()=>{t?.forEach((e,s)=>{e.removeEventListener("transitionend",()=>m(s))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[r(f,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[l("div",{className:"mb-6 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t.link,children:e?.primaryButton})})]})]});return l(B,{children:[o?.title&&r(w,{data:{title:o?.title}}),r("div",{className:"tablet:block hidden",children:r("div",{className:n("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",i),children:o?.products?.map((t,e)=>{const s=d===e;return l("div",{style:{flex:s?7:1},ref:u=>{u&&y(e,u)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{d!==e&&(c.current={[e]:!0},v(e))},children:[r(f,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),x?.[e]&&s?l("div",{className:n("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[l("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(p,{size:"sm",hoverEffect:"slide",variant:"secondary",className:n("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":""),children:r("a",{href:t?.link,children:o?.primaryButton})})]}):null]},e)})})}),r("div",{className:"tablet:hidden block",children:r(N,{className:n("h-[400px] !overflow-visible",i),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var V=T;export{V as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n }\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style = 'flex: 7 1 0%; transition: all 0.15s'\n } else {\n item.style = 'flex: 1 1 0%; transition: all 0.15s'\n }\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div className=\"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n <div className=\"mb-6 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'mb-1.5 w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a href={data.link}>{configuration?.primaryButton}</a>\n </Button>\n </div>\n </div>\n )\n }\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className=\"tablet:block hidden\">\n <div\n className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 7 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onClick={() => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n {currentWidth?.[idx] && isExpanded ? (\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\n )}\n >\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n {item?.title}\n </p>\n <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n 'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n data?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <a href={item?.link}>{data?.primaryButton}</a>\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n primaryButton: data?.primaryButton,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import l from"../../components/picture.js";import{withStyles as p}from"../../shared/Styles.js";import n from"../Title/index.js";import c from"../SwiperBox/index.js";const d=({data:e,configuration:r})=>a("div",{className:o("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]","laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]",r?.shape==="round"?"rounded-[16px]":"rounded-none"),children:[t(l,{className:"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover",source:e?.image}),t("p",{className:"tablet:text-lg flex-1 text-center text-sm font-semibold",children:e?.name})]}),m=({data:e,buildData:r,className:s="",key:i})=>a("div",{className:o("w-full",s),children:[e?.title&&t(n,{data:{title:e?.title}}),t(c,{className:"!overflow-visible",id:"Category"+i,data:{list:e?.products,configuration:{shape:e?.shape}},Slide:d,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:5}}})]});var h=p(m);export{h as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n
|
|
5
|
-
"mappings": "aAiCI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBAhCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAExCR,EAAC,OACC,UAAWC,EACT,+DACA,+DACAO,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,UAAAT,EAACG,EAAA,CAAQ,UAAU,uEAAuE,OAAQK,GAAM,MAAO,EAC/GR,EAAC,KAAE,UAAU,0DAA2D,SAAAQ,GAAM,KAAK,GACrF,EAIEE,EAAoC,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: string\n name: string\n}\n\nexport interface CategoryProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n products: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n key?: string\n}\n\nconst CategoryItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC]',\n 'laptop:p-6 desktop:p-8 cursor-pointer p-4 hover:bg-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture className=\"tablet:h-[146px] mb-2 flex h-[74px] w-full items-center object-cover\" source={data?.image} />\n <p className=\"tablet:text-lg flex-1 text-center text-sm font-semibold\">{data?.name}</p>\n </div>\n )\n}\n\nconst Category: React.FC<CategoryProps> = ({ data, buildData, className = '', key }) => {\n return (\n <div className={cn('w-full', className)}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Category' + key}\n data={{ list: data?.products, configuration: { shape: data?.shape } }}\n Slide={CategoryItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 5,\n },\n }}\n />\n </div>\n )\n}\n\nexport default withStyles(Category)\n"],
|
|
5
|
+
"mappings": "aAiCI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBAhCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAyBtB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAExCR,EAAC,OACC,UAAWC,EACT,+DACA,+DACAO,GAAe,QAAU,QAAU,iBAAmB,cACxD,EAEA,UAAAT,EAACG,EAAA,CAAQ,UAAU,uEAAuE,OAAQK,GAAM,MAAO,EAC/GR,EAAC,KAAE,UAAU,0DAA2D,SAAAQ,GAAM,KAAK,GACrF,EAIEE,EAAoC,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,UAAAC,EAAY,GAAI,IAAAC,CAAI,IAE9EZ,EAAC,OAAI,UAAWC,EAAG,SAAUU,CAAS,EACnC,UAAAJ,GAAM,OAASR,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOG,GAAM,KAAM,EAAG,EACrDR,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,WAAaO,EACjB,KAAM,CAAE,KAAML,GAAM,SAAU,cAAe,CAAE,MAAOA,GAAM,KAAM,CAAE,EACpE,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EAIJ,IAAOO,EAAQV,EAAWM,CAAQ",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "Title", "SwiperBox", "CategoryItem", "data", "configuration", "Category", "buildData", "className", "key", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as y,Picture as N,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as k}from"../../shared/Styles.js";const c=i.forwardRef(({data:x,className:d},u)=>{const{title:l,subtitle:g,pcImage:f,mobileImage:b,primaryButton:o,secondaryButton:r,theme:h="light",products:p=[]}=x;return a("div",{"data-ui-component-id":"HeroBanner",ref:u,className:e(h==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",d),children:[t(N,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[
|
|
1
|
+
"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as y,Picture as N,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as k}from"../../shared/Styles.js";const c=i.forwardRef(({data:x,className:d},u)=>{const{title:l,subtitle:g,pcImage:f,mobileImage:b,primaryButton:o,secondaryButton:r,theme:h="light",products:p=[]}=x;return a("div",{"data-ui-component-id":"HeroBanner",ref:u,className:e(h==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",d),children:[t(N,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[l&&a("div",{className:"laptop:text-left max-w-[686px] space-y-4 text-center",children:[t(y,{as:"h1",size:5,className:e("hero-banner-title"),html:l}),t(m,{className:e("hero-banner-subtitle laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px]"),html:g})]}),a("div",{className:"laptop:justify-start flex items-center justify-center gap-4",children:[r&&t(n,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:r.text}),o&&t(n,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:o.text})]})]}),p.length>0&&t("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:p.map((v,s)=>a(i.Fragment,{children:[t(m,{className:e("hero-banner-product-text lg-desktop:text-[14px] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]"),html:v.title}),s<p.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});c.displayName="HeroBanner";var j=k(c);export{j as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[
|
|
5
|
-
"mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAElH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n {title && (\n <div className=\"laptop:text-left max-w-[686px] space-y-4 text-center\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n <Text\n className={cn('hero-banner-subtitle laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px]')}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start flex items-center justify-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]'\n )}\n html={product.title}\n />\n {index < products.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAElH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,6LACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,uDACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,UAAWC,EAAG,oEAAoE,EAClF,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,8DACZ,UAAAiB,GACClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,GACjBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAS,IAAI,CAACC,EAASC,IACtBrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,0GACF,EACA,KAAMc,EAAQ,MAChB,EACCC,EAAQF,EAAS,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPzDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "products", "product", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as o,Heading as g,Text as v}from"../../components/index.js";import{withStyles as
|
|
2
|
-
aspect-[390/480] overflow-hidden`,p,{"aiui-dark":
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
flex w-full items-
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as o,Heading as g,Text as v}from"../../components/index.js";import{withStyles as x}from"../../shared/Styles.js";import{cn as a}from"../../helpers/utils.js";const f=({data:l,className:p=""})=>{const{title:i,description:s,backgroundImage:r,mobileBackgroundImage:d,primaryButton:m,secondaryButton:n,theme:c,shape:u}=l,b=()=>{},y=()=>{};return t("section",{"data-ui-component-id":"MemberEquity",className:a(`tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative
|
|
2
|
+
aspect-[390/480] overflow-hidden`,p,{"aiui-dark":c==="dark","rounded-box":u==="rounded"}),children:[e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:r?.url,type:"video/mp4"})}),e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:e("source",{src:d?.url,type:"video/mp4"})}),e("div",{className:`
|
|
3
|
+
laptop:items-center
|
|
4
|
+
absolute
|
|
5
|
+
inset-0 flex w-full items-end
|
|
6
6
|
`,children:t("div",{className:`
|
|
7
7
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
|
|
8
8
|
desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
|
|
9
|
-
`,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(g,{as:"h2",size:
|
|
9
|
+
`,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(g,{as:"h2",size:3,className:"member-equity-title ",html:i}),e(v,{size:2,className:"member-equity-description",html:s})]}),t("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[e(o,{variant:"secondary",onClick:y,className:a("member-equity-button-secondary"),children:n.text}),e(o,{variant:"primary",onClick:b,className:a("member-equity-button-primary"),children:m.text})]})]})})]})};var C=x(f);export{C as default};
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative\n aspect-[390/480] overflow-hidden`,\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n <div\n className={`\n laptop:items-center \n absolute\n inset-0 flex w-full items-end\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary')}\n >\n {secondaryButton.text}\n </Button>\n <Button variant=\"primary\" onClick={handleButtonPrimaryClick} className={cn('member-equity-button-primary')}>\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
5
|
"mappings": "aAgCQ,cAAAA,EAkBE,QAAAC,MAlBF,oBA/BR,MAAkB,QAClB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,MAAAC,MAAU,yBAEnB,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAC/GT,EACIU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,OACElB,EAAC,WACC,uBAAqB,eACrB,UAAWK,EACT;AAAA,0CAEAG,EACA,CACE,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,UAAAjB,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,SAAAA,EAAC,UAAO,IAAKY,GAAiB,IAAK,KAAK,YAAY,EACtD,EACAZ,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKa,GAAuB,IAAK,KAAK,YAAY,EAC5D,EACAb,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA,QAMX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMO,EAAO,EAC1EV,EAACI,EAAA,CAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMO,EAAa,GAC5E,EAEAV,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,QAAQ,YACR,QAASiB,EACT,UAAWb,EAAG,gCAAgC,EAE7C,SAAAS,EAAgB,KACnB,EACAf,EAACE,EAAA,CAAO,QAAQ,UAAU,QAASgB,EAA0B,UAAWZ,EAAG,8BAA8B,EACtG,SAAAQ,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOM,EAAQf,EAAWE,CAAY",
|
|
6
6
|
"names": ["jsx", "jsxs", "Button", "Heading", "Text", "withStyles", "cn", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as T,jsx as e,jsxs as l}from"react/jsx-runtime";import v from"react";import{withStyles as I}from"../../shared/Styles.js";import B from"../../components/picture.js";import C from"../../components/button.js";import{Heading as G}from"../../components/heading.js";import{Text as w}from"../../components/text.js";import{Carousel as y,CarouselContent as k,CarouselItem as N}from"../../components/carousel.js";import{Grid as g,GridItem as d}from"../../components/gird.js";import L from"../Title/index.js";import{cn as M}from"../../helpers/utils.js";import{Tabs as P,TabsList as R,TabsTrigger as S,TabsContent as z}from"../../components/tabs.js";const p=({item:f,shape:h="square"})=>{const{theme:m="light",title:c,description:b,imageUrl:i,primaryButton:s,secondaryButton:r}=f;return l("div",{className:M("item-wrapper relative w-full",{"rounded-box":h==="rounded","aiui-dark":m==="dark"},"text-info-primary"),children:[e(B,{source:i?.url,className:"inset-0",style:{aspectRatio:`${i?.width}/${i?.height}`}}),l("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[l("div",{children:[e(G,{size:3,className:"item-title",html:c}),e(w,{size:2,className:"item-description",html:b})]}),l("div",{className:"flex gap-[16px]",children:[r&&e(C,{variant:"secondary",asChild:!0,children:e("a",{href:r.link,children:r.text})}),s&&e(C,{variant:"primary",asChild:!0,children:e("a",{href:s.link,children:s.text})})]})]})]})},H=v.forwardRef((f,h)=>{const{shape:m,sectionTitle:c,groupByTab:b=!1,items:i=[],carousel:s}=f.data,r=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},u=i.map(t=>t.tabName).filter(Boolean).filter((t,a,o)=>o.indexOf(t)===a),x=u.map(t=>({tabName:t,items:i.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:h,className:"text-info-primary",children:[c&&e(L,{data:{title:c},className:"section-title"}),b?l(P,{shape:m,align:"left",defaultValue:u[0],children:[e(R,{children:u.map((t,a)=>e(S,{value:t,children:t},a))}),u.map((t,a)=>e(z,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:l(T,{children:[l(g,{className:"w-full",children:[x[t].map((o,n)=>e(d,{span:r(o.width??"full"),className:"laptop:block hidden",children:e(p,{item:o})},n)),e(d,{className:"laptop:hidden block",span:12,children:e(y,{className:"",children:e(k,{className:"flex",children:x[t].map((o,n)=>e(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(p,{item:o,shape:m})},n))})})})]}),s&&s?.items.length>0?e(y,{className:"laptop:mt-4 mt-3",children:e(k,{className:"flex",children:s.items.map((o,n)=>e(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(p,{item:o,shape:m})},n))})}):null]})},a))]}):l(T,{children:[l(g,{className:"w-full",children:[i.map((t,a)=>e(d,{span:r(t.width??"full"),className:"laptop:block hidden",children:e(p,{item:t})},a)),i.map((t,a)=>e(d,{span:r("full"),className:"laptop:hidden block",children:e(p,{item:t})},a))]}),s&&s?.items.length>0?e(y,{className:"laptop:mt-4 mt-3",children:e(k,{className:"flex",children:s.items.map((t,a)=>e(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(p,{item:t,shape:m})},a))})}):null]})]})});var Q=I(H);export{Q as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({ item, shape = 'square' }: { item: Item } & { shape?: Shape }) => {\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n\n return (\n <div\n className={cn(\n `item-wrapper relative w-full`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n },\n 'text-info-primary'\n )}\n >\n <Picture
|
|
5
|
-
"mappings": "AA2BM,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({ item, shape = 'square' }: { item: Item } & { shape?: Shape }) => {\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n\n return (\n <div\n className={cn(\n `item-wrapper relative w-full`,\n {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n },\n 'text-info-primary'\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={2} className=\"item-description\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryButton.link}>{secondaryButton.text}</a>\n </Button>\n )}\n {primaryButton && (\n <Button variant=\"primary\" asChild>\n <a href={primaryButton.link}>{primaryButton.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')} className=\"laptop:block hidden\">\n <ItemBlock item={item} />\n </GridItem>\n ))}\n {\n <GridItem className=\"laptop:hidden block\" span={12}>\n <Carousel className=\"\">\n <CarouselContent className=\"flex\">\n {tabItemsMaps[tabName].map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n </GridItem>\n }\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')} className=\"laptop:block hidden\">\n <ItemBlock item={item} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock item={item} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "AA2BM,OA0EQ,YAAAA,EA1ER,OAAAC,EAME,QAAAC,MANF,oBA3BN,OAAOC,MAAW,QAElB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,+BACxD,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAElB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,MAAmB,2BACzD,MAAMC,EAAY,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAQ,QAAS,IAA0C,CACpF,KAAM,CAAE,MAAAC,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,CAAgB,EAAIP,EAE1F,OACEnB,EAAC,OACC,UAAWa,EACT,+BACA,CACE,cAAeO,IAAU,UACzB,YAAaC,IAAU,MACzB,EACA,mBACF,EAEA,UAAAtB,EAACI,EAAA,CACC,OAAQqB,GAAU,IAClB,UAAU,UACV,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EACAxB,EAAC,OAAI,UAAU,kFACb,UAAAA,EAAC,OACC,UAAAD,EAACM,EAAA,CAAQ,KAAM,EAAG,UAAU,aAAa,KAAMiB,EAAO,EACtDvB,EAACO,EAAA,CAAK,KAAM,EAAG,UAAU,mBAAmB,KAAMiB,EAAa,GACjE,EACAvB,EAAC,OAAI,UAAU,kBACZ,UAAA0B,GACC3B,EAACK,EAAA,CAAO,QAAQ,YAAY,QAAO,GACjC,SAAAL,EAAC,KAAE,KAAM2B,EAAgB,KAAO,SAAAA,EAAgB,KAAK,EACvD,EAEDD,GACC1B,EAACK,EAAA,CAAO,QAAQ,UAAU,QAAO,GAC/B,SAAAL,EAAC,KAAE,KAAM0B,EAAc,KAAO,SAAAA,EAAc,KAAK,EACnD,GAEJ,GACF,GACF,CAEJ,EAEME,EAA0B1B,EAAM,WAAyD,CAAC2B,EAAOC,IAAQ,CAC7G,KAAM,CAAE,MAAAT,EAAO,aAAAU,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIL,EAAM,KAE1EM,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWJ,EACd,IAAIb,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAMkB,EAAOC,IAAQA,EAAI,QAAQnB,CAAI,IAAMkB,CAAK,EAErDE,EAAeH,EAClB,IAAII,IAAY,CACf,QAAAA,EACA,MAAOR,EAAM,OAAOb,GAAQA,EAAK,UAAYqB,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,OACEzC,EAAC,WAAQ,uBAAqB,0BAA0B,IAAK6B,EAAK,UAAU,oBACzE,UAAAC,GAAgB/B,EAACa,EAAA,CAAM,KAAM,CAAE,MAAOkB,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACC/B,EAACc,EAAA,CAAK,MAAOM,EAAO,MAAM,OAAO,aAAcgB,EAAS,CAAC,EACvD,UAAArC,EAACgB,EAAA,CACE,SAAAqB,EAAS,IAAI,CAACI,EAASH,IACtBtC,EAACiB,EAAA,CAAwB,MAAOwB,EAC7B,SAAAA,GADeH,CAElB,CACD,EACH,EACCD,EAAS,IAAI,CAACI,EAASH,IACtBtC,EAACkB,EAAA,CAAwB,MAAOuB,EAAU,UAAU,qCAClD,SAAAxC,EAAAF,EAAA,CACE,UAAAE,EAACU,EAAA,CAAK,UAAU,SACb,UAAA6B,EAAaC,CAAO,EAAE,IAAI,CAACrB,EAAMkB,IAChCtC,EAACY,EAAA,CAAqB,KAAMuB,EAAQf,EAAK,OAAS,MAAM,EAAG,UAAU,sBACnE,SAAApB,EAACmB,EAAA,CAAU,KAAMC,EAAM,GADVkB,CAEf,CACD,EAECtC,EAACY,EAAA,CAAS,UAAU,sBAAsB,KAAM,GAC9C,SAAAZ,EAACQ,EAAA,CAAS,UAAU,GAClB,SAAAR,EAACS,EAAA,CAAgB,UAAU,OACxB,SAAA+B,EAAaC,CAAO,EAAE,IAAI,CAACrB,EAAMkB,IAChCtC,EAACU,EAAA,CAAyB,UAAU,qDAClC,SAAAV,EAACmB,EAAA,CAAU,KAAMC,EAAM,MAAOC,EAAO,GADpBiB,CAEnB,CACD,EACH,EACF,EACF,GAEJ,EACCJ,GAAYA,GAAU,MAAM,OAAS,EACpClC,EAACQ,EAAA,CAAS,UAAU,mBAClB,SAAAR,EAACS,EAAA,CAAgB,UAAU,OACxB,SAAAyB,EAAS,MAAM,IAAI,CAACd,EAAMkB,IACzBtC,EAACU,EAAA,CAAyB,UAAU,qDAClC,SAAAV,EAACmB,EAAA,CAAU,KAAMC,EAAM,MAAOC,EAAO,GADpBiB,CAEnB,CACD,EACH,EACF,EACE,MACN,GAjCgBA,CAkClB,CACD,GACH,EAEArC,EAAAF,EAAA,CACE,UAAAE,EAACU,EAAA,CAAK,UAAU,SACb,UAAAsB,EAAM,IAAI,CAACb,EAAMkB,IAChBtC,EAACY,EAAA,CAAqB,KAAMuB,EAAQf,EAAK,OAAS,MAAM,EAAG,UAAU,sBACnE,SAAApB,EAACmB,EAAA,CAAU,KAAMC,EAAM,GADVkB,CAEf,CACD,EACAL,EAAM,IAAI,CAACb,EAAMkB,IAChBtC,EAACY,EAAA,CAAqB,KAAMuB,EAAQ,MAAM,EAAG,UAAU,sBACrD,SAAAnC,EAACmB,EAAA,CAAU,KAAMC,EAAM,GADVkB,CAEf,CACD,GACH,EACCJ,GAAYA,GAAU,MAAM,OAAS,EACpClC,EAACQ,EAAA,CAAS,UAAU,mBAClB,SAAAR,EAACS,EAAA,CAAgB,UAAU,OACxB,SAAAyB,EAAS,MAAM,IAAI,CAACd,EAAMkB,IACzBtC,EAACU,EAAA,CAAyB,UAAU,qDAClC,SAAAV,EAACmB,EAAA,CAAU,KAAMC,EAAM,MAAOC,EAAO,GADpBiB,CAEnB,CACD,EACH,EACF,EACE,MACN,GAEJ,CAEJ,CAAC,EAED,IAAOM,EAAQzC,EAAWyB,CAAuB",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "ItemBlock", "item", "shape", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import i from"react";import{cn as e}from"../helpers/utils.js";import{Slot as d}from"@radix-ui/react-slot";const r=i.forwardRef(({...m},p)=>{const{asChild:s,children:t,className:a,overflow:x,...l}=m,n=s?d:"div";return x==="hidden"?o("div",{className:e("overflow-hidden","tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",a),children:o(n,{className:e("mx-auto box-border w-full max-w-[1772px]","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8"),...l,ref:p,children:t})}):o(n,{...l,ref:p,className:e("mx-auto w-full
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import i from"react";import{cn as e}from"../helpers/utils.js";import{Slot as d}from"@radix-ui/react-slot";const r=i.forwardRef(({...m},p)=>{const{asChild:s,children:t,className:a,overflow:x,...l}=m,n=s?d:"div";return x==="hidden"?o("div",{className:e("overflow-hidden","tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",a),children:o(n,{className:e("mx-auto box-border w-full max-w-[1772px]","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8"),...l,ref:p,children:t})}):o(n,{...l,ref:p,className:e("mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-8","tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",a),children:t})});r.displayName="Container";export{r as Container};
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n overflow?: 'hidden'\n} & React.ComponentPropsWithoutRef<'div'>\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { asChild, children, className, overflow, ...containerProps } = props\n const Comp = asChild ? Slot : 'div'\n\n if (overflow === 'hidden') {\n return (\n <div\n className={cn(\n 'overflow-hidden',\n 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n className\n )}\n >\n <Comp\n className={cn(\n 'mx-auto box-border w-full max-w-[1772px]',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8'\n )}\n {...containerProps}\n ref={forwardedRef}\n >\n {children}\n </Comp>\n </div>\n )\n }\n return (\n <Comp\n {...containerProps}\n ref={forwardedRef}\n className={cn(\n 'mx-auto w-full
|
|
5
|
-
"mappings": "AAwBQ,cAAAA,MAAA,oBAxBR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBASrB,MAAMC,EAAYH,EAAM,WAA6C,CAAC,CAAE,GAAGI,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAe,EAAIN,EAChEO,EAAOL,EAAUJ,EAAO,MAE9B,OAAIO,IAAa,SAEbV,EAAC,OACC,UAAWE,EACT,kBACA,uFACAO,CACF,EAEA,SAAAT,EAACY,EAAA,CACC,UAAWV,EACT,2CACA,8DACF,EACC,GAAGS,EACJ,IAAKL,EAEJ,SAAAE,EACH,EACF,EAIFR,EAACY,EAAA,CACE,GAAGD,EACJ,IAAKL,EACL,UAAWJ,EACT,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n overflow?: 'hidden'\n} & React.ComponentPropsWithoutRef<'div'>\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { asChild, children, className, overflow, ...containerProps } = props\n const Comp = asChild ? Slot : 'div'\n\n if (overflow === 'hidden') {\n return (\n <div\n className={cn(\n 'overflow-hidden',\n 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n className\n )}\n >\n <Comp\n className={cn(\n 'mx-auto box-border w-full max-w-[1772px]',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-32 px-8'\n )}\n {...containerProps}\n ref={forwardedRef}\n >\n {children}\n </Comp>\n </div>\n )\n }\n return (\n <Comp\n {...containerProps}\n ref={forwardedRef}\n className={cn(\n 'mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-8',\n 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n className\n )}\n >\n {children}\n </Comp>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "AAwBQ,cAAAA,MAAA,oBAxBR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBASrB,MAAMC,EAAYH,EAAM,WAA6C,CAAC,CAAE,GAAGI,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAe,EAAIN,EAChEO,EAAOL,EAAUJ,EAAO,MAE9B,OAAIO,IAAa,SAEbV,EAAC,OACC,UAAWE,EACT,kBACA,uFACAO,CACF,EAEA,SAAAT,EAACY,EAAA,CACC,UAAWV,EACT,2CACA,8DACF,EACC,GAAGS,EACJ,IAAKL,EAEJ,SAAAE,EACH,EACF,EAIFR,EAACY,EAAA,CACE,GAAGD,EACJ,IAAKL,EACL,UAAWJ,EACT,iBACA,8EACA,uFACAO,CACF,EAEC,SAAAD,EACH,CAEJ,CAAC,EAEDJ,EAAU,YAAc",
|
|
6
6
|
"names": ["jsx", "React", "cn", "Slot", "Container", "props", "forwardedRef", "asChild", "children", "className", "overflow", "containerProps", "Comp"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ data, className
|
|
4
|
+
component: ({ data, className }: {
|
|
5
5
|
className?: string;
|
|
6
6
|
data: {
|
|
7
7
|
key?: string;
|
|
@@ -12,16 +12,12 @@ declare const meta: {
|
|
|
12
12
|
url: string;
|
|
13
13
|
};
|
|
14
14
|
subTitle: string;
|
|
15
|
+
link?: string;
|
|
15
16
|
}>;
|
|
16
17
|
shape?: "round" | "square";
|
|
17
18
|
itemShape?: "round" | "square";
|
|
18
19
|
primaryButton?: string;
|
|
19
20
|
};
|
|
20
|
-
event?: {
|
|
21
|
-
primaryButton?: {
|
|
22
|
-
onClick: (v: any) => void;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
21
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
22
|
parameters: {
|
|
27
23
|
layout: string;
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -792,9 +792,6 @@ video {
|
|
|
792
792
|
.min-w-32 {
|
|
793
793
|
min-width: 8rem;
|
|
794
794
|
}
|
|
795
|
-
.max-w-\[1664px\] {
|
|
796
|
-
max-width: 1664px;
|
|
797
|
-
}
|
|
798
795
|
.max-w-\[1772px\] {
|
|
799
796
|
max-width: 1772px;
|
|
800
797
|
}
|
|
@@ -1875,6 +1872,10 @@ video {
|
|
|
1875
1872
|
padding-left: 28px;
|
|
1876
1873
|
padding-right: 28px;
|
|
1877
1874
|
}
|
|
1875
|
+
.lg-desktop\:px-\[calc\(50\%-832px\)\] {
|
|
1876
|
+
padding-left: calc(50% - 832px);
|
|
1877
|
+
padding-right: calc(50% - 832px);
|
|
1878
|
+
}
|
|
1878
1879
|
.lg-desktop\:pb-\[14px\] {
|
|
1879
1880
|
padding-bottom: 14px;
|
|
1880
1881
|
}
|