@anker-in/headless-ui 1.3.51 → 1.3.52
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,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var H=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var l in t)v(e,l,{get:t[l],enumerable:!0})},S=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of F(t))!Q.call(e,o)&&o!==l&&v(e,o,{get:()=>t[o],enumerable:!(s=V(t,o))||s.enumerable});return e};var N=(e,t,l)=>(l=e!=null?H(G(e)):{},S(t||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e)),K=e=>S(v({},"__esModule",{value:!0}),e);var ae={};q(ae,{default:()=>te});module.exports=K(ae);var a=require("react/jsx-runtime"),T=N(require("react")),n=require("react"),r=require("../../helpers/utils.js"),P=require("../../components/heading.js"),D=require("../../components/text.js"),_=N(require("../../components/picture.js")),w=require("../../hooks/useExposure.js"),A=require("../../shared/Styles.js"),z=require("../../shared/trackUrlRef.js"),L=require("../../helpers/utils.js"),B=require("../AiuiProvider/index.js"),E=require("react-responsive"),b=require("swiper/react"),M=require("swiper/modules"),re=require("swiper/css"),oe=require("swiper/css/pagination");const U="content",x="image_text_overlay",I="image",$="image-text-overlay-mobile-pagination",y={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},W=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${y.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${y.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${y.tablet}`),e.default?.url&&t.push(`${e.default.url} ${y.default}`),t.join(", ")},J=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",X=(e,t)=>{const l=[];for(let s=0;s<e.length;s+=t)l.push(e.slice(s,s+t));return l},Y=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},Z=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",ee=(e,t)=>{switch(e){case 2:case 4:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]";case 3:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 5:return t<2?"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 6:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";default:return e<=1?"aspect-[358/240]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]"}},R=({item:e,index:t,count:l,classNames:s})=>{const o=W(e.backgroundImage),d=J(e.backgroundImage),p=Z(t,l),m=T.useRef(null),{locale:k="us",pageHandle:g}=(0,B.useAiuiContext)();(0,w.useExposure)(m,{componentType:I,componentName:x,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const i=e.link?(0,L.getLocalizedPath)(e.link,k):void 0,f=i?(0,z.trackUrlRef)(i,`${g??""}_${I}_${x}`):void 0,h=`${e.title}#${e.subtitle||""}#${e.title}`,u=ee(l,t);return(0,a.jsxs)("div",{ref:m,className:(0,r.cn)("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",u,p,s?.card),children:[f&&(0,a.jsx)("a",{href:f,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${I}#${x}`,"data-headless-title-desc-button":h}),e.backgroundImage?.isShowVideo?(0,a.jsxs)(a.Fragment,{children:[e.backgroundImage?.mobileVideo&&(0,a.jsx)("video",{className:(0,r.cn)("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",s?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&(0,a.jsx)("video",{className:(0,r.cn)("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",s?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):o&&(0,a.jsx)(_.default,{source:o,alt:d||e.title,className:(0,r.cn)("image-text-overlay-card-image","absolute inset-0 size-full",s?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),(0,a.jsxs)("div",{className:(0,r.cn)("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",s?.cardContent),children:[(0,a.jsx)(P.Heading,{as:"h4",size:2,weight:"bold",html:e.title,className:(0,r.cn)("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",s?.cardTitle)}),e.subtitle&&(0,a.jsx)(D.Text,{as:"p",size:"none",weight:"bold",html:e.subtitle,className:(0,r.cn)("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",l<=3&&"lg-desktop:text-lg",s?.cardSubtitle)})]})]})},C=(0,n.forwardRef)(({data:e,className:t,classNames:l={},...s},o)=>{const d=T.useRef(null),{items:p=[]}=e,[m,k]=(0,n.useState)(!1),g=(0,E.useMediaQuery)({query:"(max-width: 767px)"});if((0,n.useEffect)(()=>{k(g)},[g]),(0,w.useExposure)(d,{componentType:U,componentName:x}),T.useImperativeHandle(o,()=>d.current),!p.length)return null;const i=p.length,f=i>3&&m,h=X(p,3);return(0,a.jsx)("div",{ref:d,className:(0,r.cn)("image-text-overlay-root",t,l.root),"data-ui-component-id":"ImageTextOverlay",...s,children:f?(0,a.jsxs)("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[(0,a.jsx)(b.Swiper,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[M.Pagination],slidesPerView:1,pagination:{clickable:!0,el:`.${$}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:h.map((u,c)=>(0,a.jsx)(b.SwiperSlide,{className:"!h-auto",children:(0,a.jsx)("div",{className:"flex flex-col gap-4",children:u.map((j,O)=>(0,a.jsx)(R,{item:j,index:c*3+O,count:i,classNames:l},c*3+O))})},c))}),(0,a.jsx)("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:(0,a.jsx)("div",{className:(0,r.cn)($,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),(0,a.jsx)("style",{children:`
|
|
2
2
|
.image-text-overlay-bullet {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
width: 8px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageTextOverlay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n html={item.title}\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n />\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n html={item.subtitle}\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n />\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ImageTextOverlay_exports", "__export", "ImageTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react", "import_utils", "import_heading", "import_text", "import_picture", "import_useExposure", "import_Styles", "import_trackUrlRef", "import_AiuiProvider", "import_react_responsive", "import_modules", "import_css", "import_pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "getAspectRatioClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "aspectRatioClasses", "Picture", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{Fragment as W,jsx as a,jsxs as x}from"react/jsx-runtime";import*as k from"react";import{forwardRef as $,useEffect as R,useState as C}from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as P}from"../../components/heading.js";import{Text as D}from"../../components/text.js";import _ from"../../components/picture.js";import{useExposure as I}from"../../hooks/useExposure.js";import{withLayout as A}from"../../shared/Styles.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";import{useMediaQuery as E}from"react-responsive";import{Swiper as
|
|
1
|
+
"use client";import{Fragment as W,jsx as a,jsxs as x}from"react/jsx-runtime";import*as k from"react";import{forwardRef as $,useEffect as R,useState as C}from"react";import{cn as r}from"../../helpers/utils.js";import{Heading as P}from"../../components/heading.js";import{Text as D}from"../../components/text.js";import _ from"../../components/picture.js";import{useExposure as I}from"../../hooks/useExposure.js";import{withLayout as A}from"../../shared/Styles.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{getLocalizedPath as L}from"../../helpers/utils.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";import{useMediaQuery as E}from"react-responsive";import{Swiper as M,SwiperSlide as j}from"swiper/react";import{Pagination as H}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const V="content",f="image_text_overlay",h="image",w="image-text-overlay-mobile-pagination",v={default:767,tablet:1024,laptop:1439,desktop:1919,lgDesktop:9999},F=e=>{if(!e)return"";const t=[];return e.lgDesktop?.url&&t.push(`${e.lgDesktop.url}`),e.desktop?.url&&t.push(`${e.desktop.url} ${v.desktop}`),e.laptop?.url&&t.push(`${e.laptop.url} ${v.laptop}`),e.tablet?.url&&t.push(`${e.tablet.url} ${v.tablet}`),e.default?.url&&t.push(`${e.default.url} ${v.default}`),t.join(", ")},G=e=>e&&(e.default?.alt||e.tablet?.alt||e.laptop?.alt||e.desktop?.alt||e.lgDesktop?.alt)||"",Q=(e,t)=>{const s=[];for(let l=0;l<e.length;l+=t)s.push(e.slice(l,l+t));return s},q=e=>{switch(e){case 2:return"grid-cols-1 tablet:grid-cols-2";case 3:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3";case 4:return"grid-cols-1 tablet:grid-cols-2";case 5:return"grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6";case 6:return"grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3";default:return e<=1?"grid-cols-1":"grid-cols-1 laptop:grid-cols-3"}},K=(e,t)=>t===5?e<2?"laptop:col-span-3":"laptop:col-span-2":"",U=(e,t)=>{switch(e){case 2:case 4:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]";case 3:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 5:return t<2?"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";case 6:return"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]";default:return e<=1?"aspect-[358/240]":"aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]"}},O=({item:e,index:t,count:s,classNames:l})=>{const d=F(e.backgroundImage),c=G(e.backgroundImage),i=K(t,s),u=k.useRef(null),{locale:y="us",pageHandle:m}=B();I(u,{componentType:h,componentName:f,position:t+1,componentTitle:e.title,componentDescription:e.subtitle});const o=e.link?L(e.link,y):void 0,g=o?z(o,`${m??""}_${h}_${f}`):void 0,b=`${e.title}#${e.subtitle||""}#${e.title}`,n=U(s,t);return x("div",{ref:u,className:r("image-text-overlay-card rounded-card",{"aiui-dark":e.theme==="dark"},"desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4",n,i,l?.card),children:[g&&a("a",{href:g,className:"absolute inset-0 z-20","aria-label":e.title,"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":b}),e.backgroundImage?.isShowVideo?x(W,{children:[e.backgroundImage?.mobileVideo&&a("video",{className:r("image-text-overlay-card-image","laptop:hidden absolute inset-0 size-full object-cover",l?.cardImage),src:e.backgroundImage.mobileVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),e.backgroundImage?.desktopVideo&&a("video",{className:r("image-text-overlay-card-image","laptop:block absolute inset-0 hidden size-full object-cover",l?.cardImage),src:e.backgroundImage.desktopVideo.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0})]}):d&&a(_,{source:d,alt:c||e.title,className:r("image-text-overlay-card-image","absolute inset-0 size-full",l?.cardImage),imgClassName:"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105"}),x("div",{className:r("image-text-overlay-card-content","relative z-10 flex w-full flex-col gap-1",l?.cardContent),children:[a(P,{as:"h4",size:2,weight:"bold",html:e.title,className:r("image-text-overlay-card-title text-info-primary line-clamp-1","w-full leading-[1.2] tracking-[-0.04em]","desktop:text-xl lg-desktop:text-2xl text-lg",l?.cardTitle)}),e.subtitle&&a(D,{as:"p",size:"none",weight:"bold",html:e.subtitle,className:r("image-text-overlay-card-subtitle text-info-primary line-clamp-1","w-full truncate leading-[1.4] tracking-[-0.02em]","lg-desktop:text-base text-sm",s<=3&&"lg-desktop:text-lg",l?.cardSubtitle)})]})]})},S=$(({data:e,className:t,classNames:s={},...l},d)=>{const c=k.useRef(null),{items:i=[]}=e,[u,y]=C(!1),m=E({query:"(max-width: 767px)"});if(R(()=>{y(m)},[m]),I(c,{componentType:V,componentName:f}),k.useImperativeHandle(d,()=>c.current),!i.length)return null;const o=i.length,g=o>3&&u,b=Q(i,3);return a("div",{ref:c,className:r("image-text-overlay-root",t,s.root),"data-ui-component-id":"ImageTextOverlay",...l,children:g?x("div",{className:"image-text-overlay-mobile-swiper relative pb-8",children:[a(M,{className:"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",modules:[H],slidesPerView:1,pagination:{clickable:!0,el:`.${w}`,bulletClass:"image-text-overlay-bullet",bulletActiveClass:"image-text-overlay-bullet-active"},spaceBetween:16,children:b.map((n,p)=>a(j,{className:"!h-auto",children:a("div",{className:"flex flex-col gap-4",children:n.map((N,T)=>a(O,{item:N,index:p*3+T,count:o,classNames:s},p*3+T))})},p))}),a("div",{className:"absolute inset-x-0 bottom-0 z-10 flex justify-center",children:a("div",{className:r(w,"flex items-center justify-center gap-2 text-center","[&_.swiper-pagination-bullet]:m-0","[&_.swiper-pagination-bullet]:shrink-0","[&_.swiper-pagination-bullet]:opacity-100")})}),a("style",{children:`
|
|
2
2
|
.image-text-overlay-bullet {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
width: 8px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ImageTextOverlay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n >\n {item.title}\n </Heading>\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n >\n {item.subtitle}\n </Text>\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { forwardRef, useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Picture from '../../components/picture.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n} from './types.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination'\n\nexport type {\n ImageTextOverlayProps,\n ImageTextOverlayItem,\n ImageTextOverlaySemanticName,\n ImageTextOverlayData,\n ImageTextOverlayBackgroundImage,\n}\n\nconst componentType = 'content'\nconst componentName = 'image_text_overlay'\nconst imageComponentType = 'image'\nconst MOBILE_SWIPER_PAGINATION_CLASS = 'image-text-overlay-mobile-pagination'\n\n/**\n * \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0E Tailwind \u65AD\u70B9\u5BF9\u5E94\uFF09\n * Picture \u7EC4\u4EF6\u4F7F\u7528 max-width \u5A92\u4F53\u67E5\u8BE2\uFF0C\u6240\u4EE5\u9700\u8981\u6309\u4ECE\u5927\u5230\u5C0F\u7684\u987A\u5E8F\u6392\u5217\n */\nconst BREAKPOINTS = {\n default: 767, // <768px (\u79FB\u52A8\u7AEF)\n tablet: 1024, // 768px - 1024px\n laptop: 1439, // 1025px - 1439px\n desktop: 1919, // 1440px - 1919px\n lgDesktop: 9999, // \u22651920px\n} as const\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u7684 source \u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"lgDesktopUrl, desktopUrl 1919, laptopUrl 1439, tabletUrl 1024, defaultUrl 767\"\n */\nconst buildResponsiveSource = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n\n const sources: string[] = []\n\n // lgDesktop \u4F5C\u4E3A\u9ED8\u8BA4\u56FE\u7247\uFF08\u65E0\u65AD\u70B9\u503C\uFF09\n if (backgroundImage.lgDesktop?.url) {\n sources.push(`${backgroundImage.lgDesktop.url}`)\n }\n if (backgroundImage.desktop?.url) {\n sources.push(`${backgroundImage.desktop.url} ${BREAKPOINTS.desktop}`)\n }\n if (backgroundImage.laptop?.url) {\n sources.push(`${backgroundImage.laptop.url} ${BREAKPOINTS.laptop}`)\n }\n if (backgroundImage.tablet?.url) {\n sources.push(`${backgroundImage.tablet.url} ${BREAKPOINTS.tablet}`)\n }\n if (backgroundImage.default?.url) {\n sources.push(`${backgroundImage.default.url} ${BREAKPOINTS.default}`)\n }\n\n return sources.join(', ')\n}\n\n/**\n * \u83B7\u53D6\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7684\u9ED8\u8BA4 alt \u6587\u672C\n */\nconst getBackgroundAlt = (backgroundImage?: ImageTextOverlayBackgroundImage): string => {\n if (!backgroundImage) return ''\n return (\n backgroundImage.default?.alt ||\n backgroundImage.tablet?.alt ||\n backgroundImage.laptop?.alt ||\n backgroundImage.desktop?.alt ||\n backgroundImage.lgDesktop?.alt ||\n ''\n )\n}\n\n// ============================================================================\n// \u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D \u2014\u2014 \u6839\u636E items \u6570\u91CF\u52A8\u6001\u51B3\u5B9A\u7F51\u683C\u5217\u6570\n//\n// Figma \u8BBE\u8BA1\u89C4\u8303\u603B\u7ED3:\n//\n// | Count | <768 (mobile) | 768-1024 (tablet) | 1025-1440 (laptop) | 1441-1920 (desktop) | \u22651921 (lg-desktop) |\n// |-------|---------------|--------------------|--------------------|---------------------|--------------------|\n// | 2 | 1col | 2col | 2col | 2col | 2col |\n// | 3 | 1col | 2col (2+1) | 3col | 3col | 3col |\n// | 4 | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) | 2col (2 rows) |\n// | 5 | 2col (3 rows) | 2col (3 rows) | 2+3 (5col flex) | 2+3 (5col flex) | 2+3 (5col flex) |\n// | 6 | 2col (3 rows) | 2col (3 rows) | 3col (2 rows) | 3col (2 rows) | 3col (2 rows) |\n//\n// ============================================================================\n\n/**\n * \u5C06\u6570\u7EC4\u6309\u6307\u5B9A\u5927\u5C0F\u5206\u7EC4\n */\nconst chunkArray = <T,>(arr: T[], size: number): T[][] => {\n const chunks: T[][] = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\n/**\n * \u83B7\u53D6\u5BB9\u5668\u7F51\u683C\u7C7B\u540D\uFF08\u6839\u636E items \u6570\u91CF\uFF09\n */\nconst getGridClasses = (count: number): string => {\n switch (count) {\n case 2:\n // mobile: 1col, tablet+: 2col\n return 'grid-cols-1 tablet:grid-cols-2'\n case 3:\n // mobile: 1col, tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3'\n case 4:\n // mobile: 2col, tablet+: 2col (uniform)\n return 'grid-cols-1 tablet:grid-cols-2'\n case 5:\n // mobile/tablet: 2col grid, laptop+: use flex layout instead (2+3 pattern)\n // We handle laptop+ separately via flex, grid for mobile/tablet only\n return 'grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-6'\n case 6:\n // mobile/tablet: 2col, laptop+: 3col\n return 'grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3'\n default:\n if (count <= 1) return 'grid-cols-1'\n // fallback: 2col mobile, 3col laptop+\n return 'grid-cols-1 laptop:grid-cols-3'\n }\n}\n\n/**\n * \u83B7\u53D6\u5355\u4E2A item \u7684 span \u7C7B\u540D (\u4EC5\u7528\u4E8E count=3 tablet \u548C count=5 laptop+)\n */\nconst getItemSpanClasses = (index: number, count: number): string => {\n if (count === 5) {\n // laptop+: \u7B2C1\u884C 2 items \u5404 span 3, \u7B2C2\u884C 3 items \u5404 span 2\n if (index < 2) return 'laptop:col-span-3'\n return 'laptop:col-span-2'\n }\n return ''\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u5BBD\u9AD8\u6BD4\u7C7B\u540D\n * \u6839\u636E items \u6570\u91CF\u548C\u65AD\u70B9\u52A8\u6001\u8BA1\u7B97\uFF0C\u786E\u4FDD\u56FE\u7247\u4E0D\u88AB\u622A\u65AD\n */\nconst getAspectRatioClasses = (count: number, index: number): string => {\n switch (count) {\n case 2:\n case 4:\n // \u59CB\u7EC8 2 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n case 3:\n // tablet 2 \u5217, laptop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 5:\n // tablet 2 \u5217, laptop+ \u7279\u6B8A flex (\u9996\u884C 2 \u4E2A\u5404\u5360 50%, \u6B21\u884C 3 \u4E2A\u5404\u5360 33%)\n // \u7B2C\u4E00\u884C\uFF08index 0-1\uFF09\u7528 2 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u7B2C\u4E8C\u884C\uFF08index 2-4\uFF09\u7528 3 \u5217\u5BBD\u9AD8\u6BD4\uFF0C\u786E\u4FDD\u9AD8\u5EA6\u4E00\u81F4\n if (index < 2) {\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[288/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n case 6:\n // tablet/laptop 2 \u5217, desktop+ 3 \u5217\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[427/256] lg-desktop:aspect-[544/320]'\n default:\n if (count <= 1) return 'aspect-[358/240]'\n return 'aspect-[358/240] tablet:aspect-[346/240] laptop:aspect-[440/192] desktop:aspect-[648/256] lg-desktop:aspect-[824/320]'\n }\n}\n\n/**\n * ImageTextOverlayCard - \u5355\u4E2A\u56FE\u6587\u53E0\u52A0\u5361\u7247\n */\nconst ImageTextOverlayCard: React.FC<{\n item: ImageTextOverlayItem\n index: number\n count: number\n classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>\n}> = ({ item, index, count, classNames }) => {\n const responsiveSource = buildResponsiveSource(item.backgroundImage)\n const defaultAlt = getBackgroundAlt(item.backgroundImage)\n const spanClasses = getItemSpanClasses(index, count)\n const imageRef = React.useRef<HTMLDivElement>(null)\n const { locale = 'us', pageHandle } = useAiuiContext()\n\n useExposure(imageRef, {\n componentType: imageComponentType,\n componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.subtitle,\n })\n\n const localizedLink = item.link ? getLocalizedPath(item.link, locale) : undefined\n const trackedLink = localizedLink\n ? trackUrlRef(localizedLink, `${pageHandle ?? ''}_${imageComponentType}_${componentName}`)\n : undefined\n const titleDescButton = `${item.title}#${item.subtitle || ''}#${item.title}`\n\n const aspectRatioClasses = getAspectRatioClasses(count, index)\n\n return (\n <div\n ref={imageRef}\n className={cn(\n 'image-text-overlay-card rounded-card',\n { 'aiui-dark': item.theme === 'dark' },\n 'desktop:p-6 lg-desktop:p-8 group relative flex flex-col items-start justify-end overflow-hidden p-4',\n aspectRatioClasses,\n spanClasses,\n classNames?.card\n )}\n >\n {/* \u6574\u5361\u94FE\u63A5 */}\n {trackedLink && (\n <a\n href={trackedLink}\n className=\"absolute inset-0 z-20\"\n aria-label={item.title}\n data-headless-type-name={`${imageComponentType}#${componentName}`}\n data-headless-title-desc-button={titleDescButton}\n />\n )}\n\n {/* \u80CC\u666F\u5A92\u4F53\uFF1A\u89C6\u9891\u6216\u56FE\u7247 */}\n {item.backgroundImage?.isShowVideo ? (\n <>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 (<1025px) */}\n {item.backgroundImage?.mobileVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:hidden absolute inset-0 size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.mobileVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n {/* \u684C\u9762\u7AEF\u89C6\u9891 (>=1025px) */}\n {item.backgroundImage?.desktopVideo && (\n <video\n className={cn(\n 'image-text-overlay-card-image',\n 'laptop:block absolute inset-0 hidden size-full object-cover',\n classNames?.cardImage\n )}\n src={item.backgroundImage.desktopVideo.url}\n autoPlay\n muted\n loop\n playsInline\n />\n )}\n </>\n ) : (\n responsiveSource && (\n <Picture\n source={responsiveSource}\n alt={defaultAlt || item.title}\n className={cn('image-text-overlay-card-image', 'absolute inset-0 size-full', classNames?.cardImage)}\n imgClassName=\"size-full object-cover cursor-pointer transition-all duration-300 group-hover:scale-105\"\n />\n )\n )}\n\n {/* \u6587\u5B57\u5185\u5BB9 */}\n <div\n className={cn(\n 'image-text-overlay-card-content',\n 'relative z-10 flex w-full flex-col gap-1',\n classNames?.cardContent\n )}\n >\n <Heading\n as=\"h4\"\n size={2}\n weight=\"bold\"\n html={item.title}\n className={cn(\n 'image-text-overlay-card-title text-info-primary line-clamp-1',\n 'w-full leading-[1.2] tracking-[-0.04em]',\n // \u5B57\u53F7: mobile/tablet/laptop 18px, desktop 20px, lg-desktop 24px\n 'desktop:text-xl lg-desktop:text-2xl text-lg',\n classNames?.cardTitle\n )}\n />\n\n {item.subtitle && (\n <Text\n as=\"p\"\n size=\"none\"\n weight=\"bold\"\n html={item.subtitle}\n className={cn(\n 'image-text-overlay-card-subtitle text-info-primary line-clamp-1',\n 'w-full truncate leading-[1.4] tracking-[-0.02em]',\n // \u5B57\u53F7: mobile/tablet/laptop 14px, desktop 14px, lg-desktop 18px (count<=3) or 16px (count>3)\n 'lg-desktop:text-base text-sm',\n count <= 3 && 'lg-desktop:text-lg',\n classNames?.cardSubtitle\n )}\n />\n )}\n </div>\n </div>\n )\n}\n\n/**\n * ImageTextOverlay - \u56FE\u6587\u53E0\u52A0\u7EC4\u4EF6\n *\n * @description \u4EE5\u80CC\u666F\u56FE\u4E3A\u4E3B\u7684\u5361\u7247\u5E03\u5C40\u7EC4\u4EF6\uFF0C\u6807\u9898\u548C\u526F\u6807\u9898\u53E0\u52A0\u663E\u793A\u5728\u56FE\u7247\u5E95\u90E8\u3002\n * \u652F\u6301 2-6 \u4E2A items \u7684\u81EA\u52A8\u54CD\u5E94\u5F0F\u7F51\u683C\u5E03\u5C40\uFF0C\u6BCF\u4E2A item \u7684 backgroundImage\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9 (default/tablet/laptop/desktop/lgDesktop)\u3002\n *\n * @example\n * ```tsx\n * <ImageTextOverlay\n * data={{\n * items: [\n * {\n * backgroundImage: {\n * default: { url: '/bg-mobile.jpg', alt: 'feature' },\n * tablet: { url: '/bg-tablet.jpg', alt: 'feature' },\n * laptop: { url: '/bg-laptop.jpg', alt: 'feature' },\n * desktop: { url: '/bg-desktop.jpg', alt: 'feature' },\n * lgDesktop: { url: '/bg-xl.jpg', alt: 'feature' },\n * },\n * title: '300+ AI brainwave audios',\n * subtitle: 'Charge in a Flash, Share in a Dash',\n * },\n * {\n * backgroundImage: { default: { url: '/bg2.jpg', alt: '' } },\n * title: '20+ white noise sounds',\n * subtitle: 'Power to Drive Your Prime',\n * },\n * ],\n * theme: 'dark',\n * }}\n * />\n * ```\n */\nconst ImageTextOverlay = forwardRef<HTMLDivElement, ImageTextOverlayProps>(\n ({ data, className, classNames = {}, ...props }, ref) => {\n const boxRef = React.useRef<HTMLDivElement>(null)\n const { items = [] } = data\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 767px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n useExposure(boxRef, {\n componentType,\n componentName,\n })\n\n React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n if (!items.length) return null\n\n const count = items.length\n const useSwiper = count > 3 && isMobile\n const chunkedItems = chunkArray(items, 3)\n\n return (\n <div\n ref={boxRef}\n className={cn('image-text-overlay-root', className, classNames.root)}\n data-ui-component-id=\"ImageTextOverlay\"\n {...props}\n >\n {useSwiper ? (\n <div className=\"image-text-overlay-mobile-swiper relative pb-8\">\n <Swiper\n className=\"w-full [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n modules={[Pagination]}\n slidesPerView={1}\n pagination={{\n clickable: true,\n el: `.${MOBILE_SWIPER_PAGINATION_CLASS}`,\n bulletClass: 'image-text-overlay-bullet',\n bulletActiveClass: 'image-text-overlay-bullet-active',\n }}\n spaceBetween={16}\n >\n {chunkedItems.map((group, gIndex) => (\n <SwiperSlide key={gIndex} className=\"!h-auto\">\n <div className=\"flex flex-col gap-4\">\n {group.map((item, index) => (\n <ImageTextOverlayCard\n key={gIndex * 3 + index}\n item={item}\n index={gIndex * 3 + index}\n count={count}\n classNames={classNames}\n />\n ))}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"absolute inset-x-0 bottom-0 z-10 flex justify-center\">\n <div\n className={cn(\n MOBILE_SWIPER_PAGINATION_CLASS,\n 'flex items-center justify-center gap-2 text-center',\n '[&_.swiper-pagination-bullet]:m-0',\n '[&_.swiper-pagination-bullet]:shrink-0',\n '[&_.swiper-pagination-bullet]:opacity-100'\n )}\n />\n </div>\n <style>{`\n .image-text-overlay-bullet {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 9999px;\n background: #767880;\n transition: all 0.3s ease;\n }\n\n .image-text-overlay-bullet-active {\n width: 32px;\n height: 8px;\n border-radius: 9999px;\n background: #080A0F;\n }\n `}</style>\n </div>\n ) : (\n <div className={cn('image-text-overlay-grid', 'grid gap-4', getGridClasses(count), classNames.grid)}>\n {items.map((item, index) => (\n <ImageTextOverlayCard key={index} item={item} index={index} count={count} classNames={classNames} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nImageTextOverlay.displayName = 'ImageTextOverlay'\n\nexport default withLayout(ImageTextOverlay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "forwardRef", "useEffect", "useState", "cn", "Heading", "Text", "Picture", "useExposure", "withLayout", "trackUrlRef", "getLocalizedPath", "useAiuiContext", "useMediaQuery", "Swiper", "SwiperSlide", "Pagination", "componentType", "componentName", "imageComponentType", "MOBILE_SWIPER_PAGINATION_CLASS", "BREAKPOINTS", "buildResponsiveSource", "backgroundImage", "sources", "getBackgroundAlt", "chunkArray", "arr", "size", "chunks", "i", "getGridClasses", "count", "getItemSpanClasses", "index", "getAspectRatioClasses", "ImageTextOverlayCard", "item", "classNames", "responsiveSource", "defaultAlt", "spanClasses", "imageRef", "locale", "pageHandle", "localizedLink", "trackedLink", "titleDescButton", "aspectRatioClasses", "ImageTextOverlay", "data", "className", "props", "ref", "boxRef", "items", "isMobile", "setIsMobile", "mediaQuery", "useSwiper", "chunkedItems", "group", "gIndex", "ImageTextOverlay_default"]
|
|
7
7
|
}
|