@anker-in/headless-ui 0.0.27-alpha.90 → 0.0.27-alpha.91
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var S=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var L=(e,s)=>{for(var n in s)u(e,n,{get:s[n],enumerable:!0})},y=(e,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of M(s))!I.call(e,a)&&a!==n&&u(e,a,{get:()=>s[a],enumerable:!(c=C(s,a))||c.enumerable});return e};var m=(e,s,n)=>(n=e!=null?S(A(e)):{},y(s||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),j=e=>y(u({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>H});module.exports=j(P);var t=require("react/jsx-runtime"),w=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=m(require("../../components/picture.js")),F=m(require("../../components/button.js")),g=m(require("../SwiperBox/index.js")),i=require("react");const z=({data:e,className:s=""})=>{const[n,c]=(0,i.useState)(0),[a,k]=(0,i.useState)({0:!0}),v=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),p=(0,i.useRef)(!1),N=(o,r)=>{r&&(v.current[o]=r)},x=o=>{b.current?.[o]&&(p.current=!1,k({[o]:!0}))};(0,i.useEffect)(()=>{const o=v.current;return o?.forEach((r,d)=>{d?(r.style.flex="1 1 0%",r.style.transition="all 0.6s"):(r.style.flex="5 1 0%",r.style.transition="all 0.6s"),r.addEventListener("transitionend",()=>{x(d)})}),()=>{o?.forEach((r,d)=>{r.removeEventListener("transitionend",()=>x(d))})}},[]);const T=({data:o,configuration:r})=>(0,t.jsxs)("div",{className:(0,l.cn)("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(w.default,{data:{title:e?.title}}),(0,t.jsx)("div",{className:"laptop:block hidden",children:(0,t.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:e?.products?.map((o,r)=>{const d=n===r,B=d?5:1,E=a?.[r]&&d;return(0,t.jsxs)("div",{style:{flex:B},ref:h=>{h&&N(r,h)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n===r||p.current||(p.current=!0,b.current={[r]:!0},c(r))},children:[(0,t.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",E?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.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]",e?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o?.link,children:e?.primaryButton})})]})]},r)})})}),(0,t.jsx)("div",{className:"laptop:hidden block",children:(0,t.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton}},Slide:T,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.
|
|
1
|
+
"use strict";"use client";var S=Object.create;var u=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var L=(e,s)=>{for(var n in s)u(e,n,{get:s[n],enumerable:!0})},y=(e,s,n,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of M(s))!I.call(e,a)&&a!==n&&u(e,a,{get:()=>s[a],enumerable:!(c=C(s,a))||c.enumerable});return e};var m=(e,s,n)=>(n=e!=null?S(A(e)):{},y(s||!e||!e.__esModule?u(n,"default",{value:e,enumerable:!0}):n,e)),j=e=>y(u({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>H});module.exports=j(P);var t=require("react/jsx-runtime"),w=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),f=m(require("../../components/picture.js")),F=m(require("../../components/button.js")),g=m(require("../SwiperBox/index.js")),i=require("react");const z=({data:e,className:s=""})=>{const[n,c]=(0,i.useState)(0),[a,k]=(0,i.useState)({0:!0}),v=(0,i.useRef)([]),b=(0,i.useRef)({0:!0}),p=(0,i.useRef)(!1),N=(o,r)=>{r&&(v.current[o]=r)},x=o=>{b.current?.[o]&&(p.current=!1,k({[o]:!0}))};(0,i.useEffect)(()=>{const o=v.current;return o?.forEach((r,d)=>{d?(r.style.flex="1 1 0%",r.style.transition="all 0.6s"):(r.style.flex="5 1 0%",r.style.transition="all 0.6s"),r.addEventListener("transitionend",()=>{x(d)})}),()=>{o?.forEach((r,d)=>{r.removeEventListener("transitionend",()=>x(d))})}},[]);const T=({data:o,configuration:r})=>(0,t.jsxs)("div",{className:(0,l.cn)("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img?.url}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.default,{size:"sm",hoverEffect:"slide",variant:"secondary",className:(0,l.cn)("w-[116px] overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",r?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o.link,children:r?.primaryButton})})]})]});return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(w.default,{data:{title:e?.title}}),(0,t.jsx)("div",{className:"laptop:block hidden",children:(0,t.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",s),children:e?.products?.map((o,r)=>{const d=n===r,B=d?5:1,E=a?.[r]&&d;return(0,t.jsxs)("div",{style:{flex:B},ref:h=>{h&&N(r,h)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{n===r||p.current||(p.current=!0,b.current={[r]:!0},c(r))},children:[(0,t.jsx)(f.default,{source:o?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,t.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",E?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:o?.title}),(0,t.jsx)("h3",{className:"desktop:text-lg line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:o?.subTitle})]}),(0,t.jsx)(F.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]",e?.shape==="round"?"rounded-2xl":""),children:(0,t.jsx)("a",{href:o?.link,children:e?.primaryButton})})]})]},r)})})}),(0,t.jsx)("div",{className:"laptop:hidden block",children:(0,t.jsx)(g.default,{className:(0,l.cn)("h-[400px] !overflow-visible",s),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton}},Slide:T,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3}}})})]})};var H=z;
|
|
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 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 const isAnimation = useRef<boolean>(false)\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 isAnimation.current = false\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 = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\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\n className={cn(\n 'relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\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-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-2xl font-bold leading-[1.2] text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"line-clamp-2 text-sm font-semibold text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n '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=\"laptop:block hidden\">\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\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 || isAnimation.current) return\n isAnimation.current = true\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 <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'w-full translate-x-0 opacity-100 transition-transform ease-out' : 'w-0 opacity-0'\n )}\n >\n <div className=\"mr-16 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 line-clamp-2 text-sm font-medium text-[#FFFFFF]\">\n {item?.subTitle}\n </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 </div>\n )\n })}\n </div>\n </div>\n <div className=\"laptop: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 itemShape: data?.itemShape,\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.
|
|
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 const isAnimation = useRef<boolean>(false)\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 isAnimation.current = false\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 = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\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\n className={cn(\n 'relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\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-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-2xl font-bold leading-[1.2] text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"line-clamp-2 text-sm font-semibold text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n '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=\"laptop:block hidden\">\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\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 || isAnimation.current) return\n isAnimation.current = true\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 <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'w-full translate-x-0 opacity-100 transition-transform ease-out' : 'w-0 opacity-0'\n )}\n >\n <div className=\"mr-16 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 line-clamp-2 text-sm font-medium text-[#FFFFFF]\">\n {item?.subTitle}\n </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 </div>\n )\n })}\n </div>\n </div>\n <div className=\"laptop: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 itemShape: data?.itemShape,\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.1,\n },\n 768: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
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", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "Title", "idx", "isExpanded", "flexValue", "isShowContent", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as C,jsx as r,jsxs as l}from"react/jsx-runtime";import T from"../Title/index.js";import{cn as s}from"../../helpers/utils.js";import F from"../../components/picture.js";import v from"../../components/button.js";import B from"../SwiperBox/index.js";import{useState as b,useEffect as E,useRef as a}from"react";const S=({data:o,className:d=""})=>{const[c,x]=b(0),[h,y]=b({0:!0}),u=a([]),m=a({0:!0}),i=a(!1),w=(t,e)=>{e&&(u.current[t]=e)},p=t=>{m.current?.[t]&&(i.current=!1,y({[t]:!0}))};E(()=>{const t=u.current;return t?.forEach((e,n)=>{n?(e.style.flex="1 1 0%",e.style.transition="all 0.6s"):(e.style.flex="5 1 0%",e.style.transition="all 0.6s"),e.addEventListener("transitionend",()=>{p(n)})}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>p(n))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:s("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",e?.itemShape==="round"?"rounded-2xl":""),children:[r(F,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:s("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[l("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:t?.title}),r("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("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(C,{children:[o?.title&&r(T,{data:{title:o?.title}}),r("div",{className:"laptop:block hidden",children:r("div",{className:s("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:o?.products?.map((t,e)=>{const n=c===e,k=n?5:1,N=h?.[e]&&n;return l("div",{style:{flex:k},ref:f=>{f&&w(e,f)},className:s("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{c===e||i.current||(i.current=!0,m.current={[e]:!0},x(e))},children:[r(F,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),l("div",{className:s("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",N?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[l("div",{className:"mr-16 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 line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("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})})]})]},e)})})}),r("div",{className:"laptop:hidden block",children:r(B,{className:s("h-[400px] !overflow-visible",d),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,itemShape:o?.itemShape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.
|
|
1
|
+
"use client";import{Fragment as C,jsx as r,jsxs as l}from"react/jsx-runtime";import T from"../Title/index.js";import{cn as s}from"../../helpers/utils.js";import F from"../../components/picture.js";import v from"../../components/button.js";import B from"../SwiperBox/index.js";import{useState as b,useEffect as E,useRef as a}from"react";const S=({data:o,className:d=""})=>{const[c,x]=b(0),[h,y]=b({0:!0}),u=a([]),m=a({0:!0}),i=a(!1),w=(t,e)=>{e&&(u.current[t]=e)},p=t=>{m.current?.[t]&&(i.current=!1,y({[t]:!0}))};E(()=>{const t=u.current;return t?.forEach((e,n)=>{n?(e.style.flex="1 1 0%",e.style.transition="all 0.6s"):(e.style.flex="5 1 0%",e.style.transition="all 0.6s"),e.addEventListener("transitionend",()=>{p(n)})}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>p(n))})}},[]);const g=({data:t,configuration:e})=>l("div",{className:s("relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]",e?.itemShape==="round"?"rounded-2xl":""),children:[r(F,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),l("div",{className:s("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[l("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-2xl font-bold leading-[1.2] text-[#FFFFFF]",children:t?.title}),r("h3",{className:"line-clamp-2 text-sm font-semibold text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("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(C,{children:[o?.title&&r(T,{data:{title:o?.title}}),r("div",{className:"laptop:block hidden",children:r("div",{className:s("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:o?.products?.map((t,e)=>{const n=c===e,k=n?5:1,N=h?.[e]&&n;return l("div",{style:{flex:k},ref:f=>{f&&w(e,f)},className:s("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{c===e||i.current||(i.current=!0,m.current={[e]:!0},x(e))},children:[r(F,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),l("div",{className:s("absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",N?"w-full translate-x-0 opacity-100 transition-transform ease-out":"w-0 opacity-0"),children:[l("div",{className:"mr-16 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 line-clamp-2 text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(v,{size:"sm",hoverEffect:"slide",variant:"secondary",className:s("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})})]})]},e)})})}),r("div",{className:"laptop:hidden block",children:r(B,{className:s("h-[400px] !overflow-visible",d),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,itemShape:o?.itemShape,primaryButton:o?.primaryButton}},Slide:g,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3}}})})]})};var H=S;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/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 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 const isAnimation = useRef<boolean>(false)\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 isAnimation.current = false\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 = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\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\n className={cn(\n 'relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\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-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-2xl font-bold leading-[1.2] text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"line-clamp-2 text-sm font-semibold text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n '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=\"laptop:block hidden\">\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\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 || isAnimation.current) return\n isAnimation.current = true\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 <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'w-full translate-x-0 opacity-100 transition-transform ease-out' : 'w-0 opacity-0'\n )}\n >\n <div className=\"mr-16 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 line-clamp-2 text-sm font-medium text-[#FFFFFF]\">\n {item?.subTitle}\n </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 </div>\n )\n })}\n </div>\n </div>\n <div className=\"laptop: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 itemShape: data?.itemShape,\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.
|
|
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 const isAnimation = useRef<boolean>(false)\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 isAnimation.current = false\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 = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\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\n className={cn(\n 'relative w-full shrink-0 grow-0 overflow-hidden border border-solid border-[#dddddd] bg-[#FFFFFF]',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\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-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-2xl font-bold leading-[1.2] text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"line-clamp-2 text-sm font-semibold text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n className={cn(\n '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=\"laptop:block hidden\">\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\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 || isAnimation.current) return\n isAnimation.current = true\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 <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'w-full translate-x-0 opacity-100 transition-transform ease-out' : 'w-0 opacity-0'\n )}\n >\n <div className=\"mr-16 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 line-clamp-2 text-sm font-medium text-[#FFFFFF]\">\n {item?.subTitle}\n </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 </div>\n )\n })}\n </div>\n </div>\n <div className=\"laptop: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 itemShape: data?.itemShape,\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.1,\n },\n 768: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
|
|
7
7
|
}
|