@anker-in/headless-ui 1.1.75 → 1.1.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AnchorNavigation/index.d.ts +20 -0
- package/dist/cjs/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/FeaturedBlogPosts/index.js +1 -1
- package/dist/cjs/biz-components/FeaturedBlogPosts/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/types.d.ts +7 -0
- package/dist/cjs/biz-components/FooterNavigation/types.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/MediaEndorsement/index.d.ts +2 -8
- package/dist/cjs/biz-components/MediaEndorsement/index.js +2 -2
- package/dist/cjs/biz-components/MediaEndorsement/index.js.map +3 -3
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/cjs/biz-components/index.d.ts +2 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +2 -2
- package/dist/cjs/shared/Styles.js +1 -1
- package/dist/cjs/shared/Styles.js.map +2 -2
- package/dist/esm/biz-components/AnchorNavigation/index.d.ts +20 -0
- package/dist/esm/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/FeaturedBlogPosts/index.js +1 -1
- package/dist/esm/biz-components/FeaturedBlogPosts/index.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/FooterNavigation/types.d.ts +7 -0
- package/dist/esm/biz-components/FooterNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/MediaEndorsement/index.d.ts +2 -8
- package/dist/esm/biz-components/MediaEndorsement/index.js +2 -2
- package/dist/esm/biz-components/MediaEndorsement/index.js.map +3 -3
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +2 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/shared/Styles.js +1 -1
- package/dist/esm/shared/Styles.js.map +2 -2
- package/package.json +1 -1
|
@@ -12,6 +12,17 @@ declare const anchorNavigationVariants: (props?: ({
|
|
|
12
12
|
alignment?: "end" | "start" | "center" | null | undefined;
|
|
13
13
|
size?: "small" | "large" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
|
+
/**
|
|
16
|
+
* 按钮颜色配置,允许按 theme 分别覆盖默认色、激活文字色、激活指示器色
|
|
17
|
+
*/
|
|
18
|
+
export interface AnchorButtonStyle {
|
|
19
|
+
/** 默认(未激活)文字色,Tailwind class,如 'text-info-secondary' */
|
|
20
|
+
defaultColor?: string;
|
|
21
|
+
/** 激活文字色,Tailwind class,如 'text-info-primary' */
|
|
22
|
+
activeColor?: string;
|
|
23
|
+
/** 激活指示器(下划线)背景色,Tailwind class,如 'after:bg-brand-0' */
|
|
24
|
+
activeIndicatorColor?: string;
|
|
25
|
+
}
|
|
15
26
|
/**
|
|
16
27
|
* 锚点项接口
|
|
17
28
|
*/
|
|
@@ -39,6 +50,15 @@ export interface AnchorNavigationProps extends React.HTMLAttributes<HTMLDivEleme
|
|
|
39
50
|
classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>;
|
|
40
51
|
/** 自定义点击事件,传入时会替代默认的滚动行为 */
|
|
41
52
|
onItemClick?: (item: AnchorSectionItem, index: number) => void;
|
|
53
|
+
/**
|
|
54
|
+
* 按钮颜色配置,覆盖 light/dark 主题下的默认颜色。
|
|
55
|
+
* 未传时按主题使用内置默认值。
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* // 自定义颜色
|
|
59
|
+
* buttonStyle={{ defaultColor: 'text-info-secondary', activeColor: 'text-info-primary', activeIndicatorColor: 'after:bg-brand-3' }}
|
|
60
|
+
*/
|
|
61
|
+
buttonStyle?: AnchorButtonStyle;
|
|
42
62
|
}
|
|
43
63
|
/**
|
|
44
64
|
* AnchorNavigation - 锚点导航
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var k=Object.create;var u=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var P=(t,e)=>{for(var n in e)u(t,n,{get:e[n],enumerable:!0})},R=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of V(e))!M.call(t,l)&&l!==n&&u(t,l,{get:()=>e[l],enumerable:!(c=B(e,l))||c.enumerable});return t};var x=(t,e,n)=>(n=t!=null?k(z(t)):{},R(e||!t||!t.__esModule?u(n,"default",{value:t,enumerable:!0}):n,t)),q=t=>R(u({},"__esModule",{value:!0}),t);var K={};P(K,{default:()=>G});module.exports=q(K);var g=require("react/jsx-runtime"),i=x(require("react")),m=require("../../helpers/utils.js"),v=require("class-variance-authority"),S=x(require("./useAnchorPosition.js")),w=require("../../components/container.js");const F=(0,v.cva)("anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"tablet:justify-start",center:"tablet:justify-center",end:"tablet:justify-end"},size:{small:"gap-3",large:"gap-6"}},defaultVariants:{alignment:"start",size:"small"}}),j=(0,v.cva)("anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300",{variants:{size:{small:"py-3",large:"py-4"}},defaultVariants:{size:"small"}}),U=(0,v.cva)("!sticky top-0 !z-40 w-full",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),W={defaultColor:"text-[#4A4C56]",activeColor:"text-[#080A0F]",activeIndicatorColor:"after:bg-brand-0"},_={defaultColor:"text-[#8A8D92]",activeColor:"text-white",activeIndicatorColor:"after:bg-brand-0"},T=i.forwardRef(({classNames:t={},data:e,onItemClick:n,buttonStyle:c,className:l,...D},E)=>{const{alignment:L="start",theme:b="light",size:y="small"}=e,f=(0,S.default)(e.sectionIds?.map(o=>o.targetId)||[]),d=i.useRef(null),h=i.useRef(null),N=i.useRef([]);i.useImperativeHandle(E,()=>d.current);const p=b==="dark"?_:W,I={defaultColor:c?.defaultColor??p.defaultColor,activeColor:c?.activeColor??p.activeColor,activeIndicatorColor:c?.activeIndicatorColor??p.activeIndicatorColor},C=i.useCallback(o=>{const r=N.current[o];if(r&&h.current){const s=h.current,a=r,A=a.offsetLeft-s.offsetWidth/2+a.offsetWidth/2;typeof s.scrollTo=="function"&&s.scrollTo({left:A,behavior:"smooth"})}},[]);return i.useEffect(()=>{if(!f)return;const o=e.sectionIds?.findIndex(r=>r.targetId===f);o!==void 0&&o!==-1&&C(o)},[f,e.sectionIds,C]),(0,g.jsx)(w.Container,{ref:d,className:(0,m.cn)(U({theme:b}),t?.root),...D,children:(0,g.jsx)("div",{ref:h,className:(0,m.cn)(F({alignment:L,size:y}),"relative",t?.content),children:e.sectionIds?.map((o,r)=>{const s=f===o.targetId;return(0,g.jsx)("button",{ref:a=>{a&&(N.current[r]=a)},"aria-current":s?!0:void 0,onClick:()=>{if(C(r),n){n(o,r);return}const a=document.getElementById(o.targetId);if(a&&d.current){const A=d.current.offsetHeight,H=a.getBoundingClientRect().top+window.scrollY-A;window.scrollTo({top:H,behavior:"smooth"})}},className:(0,m.cn)(j({size:y}),s?[I.activeColor,I.activeIndicatorColor,"after:w-full after:opacity-100"]:I.defaultColor,t?.item),children:o.label},o.targetId)})})})});T.displayName="AnchorNavigation";var G=T;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { Container } from '../../components/container.js'\n\nexport interface AnchorNavigationSemanticName {\n root: 'root'\n content: 'content'\n item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'tablet:justify-start',\n center: 'tablet:justify-center',\n end: 'tablet:justify-end',\n },\n size: {\n small: 'gap-3',\n large: 'gap-6',\n },\n },\n defaultVariants: {\n alignment: 'start',\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorItemVariants = cva(\n 'anchor-navigation-item
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_class_variance_authority", "import_useAnchorPosition", "import_container", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "AnchorNavigation", "classNames", "data", "onItemClick", "className", "rest", "ref", "alignment", "theme", "size", "activeId", "useAnchorPosition", "item", "rootRef", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { Container } from '../../components/container.js'\n\nexport interface AnchorNavigationSemanticName {\n root: 'root'\n content: 'content'\n item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'tablet:justify-start',\n center: 'tablet:justify-center',\n end: 'tablet:justify-end',\n },\n size: {\n small: 'gap-3',\n large: 'gap-6',\n },\n },\n defaultVariants: {\n alignment: 'start',\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\uFF08\u4E0D\u542B\u989C\u8272\uFF0C\u989C\u8272\u7531 buttonStyle \u63A7\u5236\uFF09\n */\nconst anchorItemVariants = cva(\n 'anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n {\n variants: {\n size: {\n small: 'py-3',\n large: 'py-4',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('!sticky top-0 !z-40 w-full', {\n variants: {\n theme: {\n light: 'bg-white',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u5141\u8BB8\u6309 theme \u5206\u522B\u8986\u76D6\u9ED8\u8BA4\u8272\u3001\u6FC0\u6D3B\u6587\u5B57\u8272\u3001\u6FC0\u6D3B\u6307\u793A\u5668\u8272\n */\nexport interface AnchorButtonStyle {\n /** \u9ED8\u8BA4\uFF08\u672A\u6FC0\u6D3B\uFF09\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-secondary' */\n defaultColor?: string\n /** \u6FC0\u6D3B\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-primary' */\n activeColor?: string\n /** \u6FC0\u6D3B\u6307\u793A\u5668\uFF08\u4E0B\u5212\u7EBF\uFF09\u80CC\u666F\u8272\uFF0CTailwind class\uFF0C\u5982 'after:bg-brand-0' */\n activeIndicatorColor?: string\n}\n\n/**\n * \u951A\u70B9\u9879\u63A5\u53E3\n */\nexport interface AnchorSectionItem {\n targetId: string\n label: string\n}\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: AnchorSectionItem[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u5BFC\u822A\u5927\u5C0F */\n size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n /** \u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684\u6EDA\u52A8\u884C\u4E3A */\n onItemClick?: (item: AnchorSectionItem, index: number) => void\n /**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u8986\u76D6 light/dark \u4E3B\u9898\u4E0B\u7684\u9ED8\u8BA4\u989C\u8272\u3002\n * \u672A\u4F20\u65F6\u6309\u4E3B\u9898\u4F7F\u7528\u5185\u7F6E\u9ED8\u8BA4\u503C\u3002\n *\n * @example\n * // \u81EA\u5B9A\u4E49\u989C\u8272\n * buttonStyle={{ defaultColor: 'text-info-secondary', activeColor: 'text-info-primary', activeIndicatorColor: 'after:bg-brand-3' }}\n */\n buttonStyle?: AnchorButtonStyle\n}\n\n/** light \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst LIGHT_DEFAULTS: Required<AnchorButtonStyle> = {\n defaultColor: 'text-[#4A4C56]',\n activeColor: 'text-[#080A0F]',\n activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/** dark \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst DARK_DEFAULTS: Required<AnchorButtonStyle> = {\n defaultColor: 'text-[#8A8D92]',\n activeColor: 'text-white',\n activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n ({ classNames = {}, data, onItemClick, buttonStyle, className, ...rest }, ref) => {\n const { alignment = 'start', theme = 'light', size = 'small' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const rootRef = React.useRef<HTMLDivElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n // \u5408\u5E76\u4E3B\u9898\u9ED8\u8BA4\u503C\u4E0E\u5916\u90E8\u4F20\u5165\u7684 buttonStyle\n const themeDefaults = theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS\n const resolvedButtonStyle: Required<AnchorButtonStyle> = {\n defaultColor: buttonStyle?.defaultColor ?? themeDefaults.defaultColor,\n activeColor: buttonStyle?.activeColor ?? themeDefaults.activeColor,\n activeIndicatorColor: buttonStyle?.activeIndicatorColor ?? themeDefaults.activeIndicatorColor,\n }\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n if (typeof container.scrollTo === 'function') {\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n }, [])\n\n // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n React.useEffect(() => {\n if (!activeId) return\n\n const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n if (activeIndex !== undefined && activeIndex !== -1) {\n autoScrollToActiveItem(activeIndex)\n }\n }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n return (\n <Container ref={rootRef} className={cn(containerVariants({ theme }), classNames?.root)} {...rest}>\n <div\n ref={containerRef}\n className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n >\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n aria-current={isActive ? true : undefined}\n onClick={() => {\n // \u9ED8\u8BA4\u884C\u4E3A\uFF1A\u6EDA\u52A8\u5230\u5BF9\u5E94\u951A\u70B9\n autoScrollToActiveItem(index)\n\n // \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\n if (onItemClick) {\n onItemClick(item, index)\n return\n }\n\n // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n const targetElement = document.getElementById(item.targetId)\n if (targetElement && rootRef.current) {\n const navHeight = rootRef.current.offsetHeight\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n }\n }}\n className={cn(\n anchorItemVariants({ size }),\n isActive\n ? [\n resolvedButtonStyle.activeColor,\n resolvedButtonStyle.activeIndicatorColor,\n 'after:w-full after:opacity-100',\n ]\n : resolvedButtonStyle.defaultColor,\n classNames?.item\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </Container>\n )\n }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_class_variance_authority", "import_useAnchorPosition", "import_container", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "LIGHT_DEFAULTS", "DARK_DEFAULTS", "AnchorNavigation", "classNames", "data", "onItemClick", "buttonStyle", "className", "rest", "ref", "alignment", "theme", "size", "activeId", "useAnchorPosition", "item", "rootRef", "containerRef", "sectionRefs", "themeDefaults", "resolvedButtonStyle", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "el", "targetElement", "navHeight", "targetPosition"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var F=Object.create;var n=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";"use client";var F=Object.create;var n=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},h=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of w(t))!R.call(e,p)&&p!==r&&n(e,p,{get:()=>t[p],enumerable:!(l=I(t,p))||l.enumerable});return e};var k=(e,t,r)=>(r=e!=null?F(B(e)):{},h(t||!e||!e.__esModule?n(r,"default",{value:e,enumerable:!0}):r,e)),S=e=>h(n({},"__esModule",{value:!0}),e);var E={};C(E,{default:()=>L});module.exports=S(E);var a=require("react/jsx-runtime"),m=k(require("react")),s=require("../../helpers/index.js"),b=k(require("../../components/picture.js")),i=require("../../index.js"),j=require("../../shared/Styles.js");const M=e=>{const t=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"pad",width:768},{key:"mobile",width:390}],r=t.filter(({key:l})=>e[l]?.url).map(({key:l,width:p})=>`${e[l].url} ${p}`);if(r.length>0)return r.join(", ");for(const{key:l}of t)if(e[l]?.url)return e[l].url;return""},D=(e,t)=>{const r=["desktop","laptop","pad","mobile","lgDesktop"];for(const l of r)if(e[l]?.alt)return e[l].alt;return t},N=(e="full")=>({full:"laptop:col-span-3","2/3":"laptop:col-span-2","1/3":"laptop:col-span-1"})[e],z=(e="full")=>e==="1/3"?"":"laptop:flex-row",T=(e="full")=>({full:"laptop:h-full laptop:w-2/3","2/3":"laptop:h-full laptop:w-1/2","1/3":"laptop:flex-1 h-[200px] lg-desktop:h-[240px]"})[e],x=m.forwardRef(({className:e,classNames:t={},data:r,onItemClick:l,...p},v)=>{const{title:g,subtitle:c,items:f}=r,y=m.useCallback((o,d)=>u=>{l?.(o,d,u)},[l]);return(0,a.jsxs)("div",{ref:v,className:(0,s.cn)("blog-posts-root","text-info-primary w-full",e,t.root),...p,children:[(g||c)&&(0,a.jsxs)("div",{className:(0,s.cn)("blog-posts-header mb-6",t.header),children:[g&&(0,a.jsx)(i.Heading,{as:"h2",size:4,html:g,className:(0,s.cn)("blog-posts-title",t.title)}),c&&(0,a.jsx)(i.Text,{as:"p",size:3,className:(0,s.cn)("",t?.subtitle),html:c})]}),(0,a.jsx)("div",{className:(0,s.cn)("blog-posts-grid","laptop:grid-cols-3 grid grid-cols-1 gap-4",t.grid),children:f.map((o,d)=>{const u=o.link?"a":"div",P=o.link?{href:o.link}:{};return(0,a.jsxs)(m.Fragment,{children:[(0,a.jsxs)(u,{...P,className:(0,s.cn)("blog-posts-card rounded-box","flex cursor-pointer flex-col gap-4","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]","laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8","laptop:overflow-hidden laptop:transition-opacity ","bg-container-secondary-1",N(o.width||"full"),z(o.width||"full"),t.card),onClick:y(o,d),children:[(0,a.jsx)("div",{className:(0,s.cn)("blog-posts-card-image","relative w-full overflow-hidden","h-[200px] shrink-0",T(o.width||"full"),t.cardImage),children:(0,a.jsx)(b.default,{source:M(o.image),alt:D(o.image,o.title),className:"rounded-box h-full object-cover",imgClassName:"h-full"})}),(0,a.jsxs)("div",{className:(0,s.cn)("blog-posts-card-content","desktop:gap-6 flex flex-col justify-center gap-4",t.cardContent),children:[(0,a.jsxs)("div",{className:"desktop:gap-2 flex flex-col gap-1",children:[(0,a.jsx)(i.Heading,{size:2,as:"h6",className:(0,s.cn)("blog-posts-card-title line-clamp-3",t.cardTitle),html:o.title}),o.description&&(0,a.jsx)(i.Text,{className:(0,s.cn)("blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",t.cardDescription),html:o.description})]}),o.date&&(0,a.jsx)(i.Text,{className:(0,s.cn)("blog-posts-card-meta","text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",t.cardMeta),html:o.date})]})]}),d<f.length-1&&(0,a.jsx)("div",{className:(0,s.cn)("blog-posts-separator","bg-lines-primary laptop:hidden h-px w-full",t.separator)})]},d)})})]})});x.displayName="FeaturedBlogPosts";var L=x;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FeaturedBlogPosts/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading, Text } from '../../index.js'\n\nexport type FeaturedBlogPostsSemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'grid'\n | 'card'\n | 'cardImage'\n | 'cardContent'\n | 'cardTitle'\n | 'cardDescription'\n | 'cardMeta'\n | 'separator'\n\n/**\n * \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\n */\nexport type FeaturedBlogPostSpan = 'full' | '2/3' | '1/3'\n\n/**\n * \u535A\u6587\u5361\u7247\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostItem {\n /** \u5C01\u9762\u56FE\u7247 */\n image: {\n mobile?: Img\n pad?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n /** \u6587\u7AE0\u6807\u9898 */\n title: string\n /** \u6587\u7AE0\u63CF\u8FF0 */\n description?: string\n /** \u65E5\u671F\u4FE1\u606F\uFF08\u5206\u7C7B\u00B7\u65E5\u671F\u00B7\u4F5C\u8005\uFF09 */\n date?: string\n /** \u6587\u7AE0\u94FE\u63A5 */\n link?: string\n /** \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF0C\u9ED8\u8BA4 full */\n width?: FeaturedBlogPostSpan\n}\n\n/**\n * FeaturedBlogPosts \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostsData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u535A\u6587\u5217\u8868 */\n items: FeaturedBlogPostItem[]\n}\n\nexport interface FeaturedBlogPostsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: FeaturedBlogPostsData\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<FeaturedBlogPostsSemanticName, string>>\n /** \u5361\u7247\u70B9\u51FB\u56DE\u8C03 */\n onItemClick?: (item: FeaturedBlogPostItem, index: number, event: React.MouseEvent) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u7C7B\u578B\n */\ntype ResponsiveImage = FeaturedBlogPostItem['image']\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024, url4 768, url5 390\"\n */\nconst getImageSource = (image: ResponsiveImage): string => {\n const breakpoints: { key: keyof ResponsiveImage; width: number }[] = [\n { key: 'lgDesktop', width: 1920 },\n { key: 'desktop', width: 1440 },\n { key: 'laptop', width: 1024 },\n { key: 'pad', width: 768 },\n { key: 'mobile', width: 390 },\n ]\n\n const sources = breakpoints\n .filter(({ key }) => image[key]?.url)\n .map(({ key, width }) => `${image[key]!.url} ${width}`)\n\n // \u5982\u679C\u6709 sources\uFF0C\u8FD4\u56DE\u62FC\u63A5\u7ED3\u679C\uFF1B\u5426\u5219\u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684 url\n if (sources.length > 0) {\n return sources.join(', ')\n }\n\n // fallback: \u8FD4\u56DE\u4EFB\u610F\u4E00\u4E2A\u6709\u6548\u7684 url\n for (const { key } of breakpoints) {\n if (image[key]?.url) return image[key]!.url\n }\n\n return ''\n}\n\n/**\n * \u4ECE\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u83B7\u53D6 alt \u6587\u672C\n */\nconst getImageAlt = (image: ResponsiveImage, fallback: string): string => {\n const keys: (keyof ResponsiveImage)[] = ['desktop', 'laptop', 'pad', 'mobile', 'lgDesktop']\n for (const key of keys) {\n if (image[key]?.alt) return image[key]!.alt!\n }\n return fallback\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247 grid \u5217\u6570 (laptop+)\n */\nconst getSpanClass = (span: FeaturedBlogPostSpan = 'full') => {\n const spanMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:col-span-3',\n '2/3': 'laptop:col-span-2',\n '1/3': 'laptop:col-span-1',\n }\n return spanMap[span]\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247\u5E03\u5C40\u65B9\u5411 (laptop+)\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u5176\u4ED6: \u5DE6\u53F3\u5E03\u5C40\n */\nconst getLayoutClass = (span: FeaturedBlogPostSpan = 'full') => {\n return span === '1/3' ? '' : 'laptop:flex-row'\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u56FE\u7247\u5C3A\u5BF8\u6837\u5F0F (laptop+)\n * full: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 2/3\n * 2/3: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 1/2\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u56FE\u7247\u9AD8\u5EA6\u586B\u6EE1\u5269\u4F59\u7A7A\u95F4\n */\nconst getImageSizeClass = (span: FeaturedBlogPostSpan = 'full') => {\n const sizeMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:h-full laptop:w-2/3',\n '2/3': 'laptop:h-full laptop:w-1/2',\n '1/3': 'laptop:flex-1 h-[200px] lg-desktop:h-[240px]',\n }\n return sizeMap[span]\n}\n\n/**\n * FeaturedBlogPosts - \u7CBE\u9009\u535A\u6587\n *\n * @description \u5C55\u793A\u7ECF\u8FC7\u7B5B\u9009\u7684\u4F18\u8D28\u6587\u7AE0\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u548C\u5E03\u5C40\u7684\u5361\u7247\u7EC4\u5408\n */\nconst FeaturedBlogPosts = React.forwardRef<HTMLDivElement, FeaturedBlogPostsProps>(\n ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n const { title, subtitle, items } = data\n\n const handleCardClick = React.useCallback(\n (item: FeaturedBlogPostItem, index: number) => (event: React.MouseEvent) => {\n onItemClick?.(item, index, event)\n },\n [onItemClick]\n )\n\n return (\n <div\n ref={ref}\n className={cn('blog-posts-root', 'text-info-primary w-full', className, classNames.root)}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('blog-posts-header mb-6', classNames.header)}>\n {title && <Heading as=\"h2\" size={4} html={title} className={cn('blog-posts-title', classNames.title)} />}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n <div className={cn('blog-posts-grid', 'laptop:grid-cols-3 grid grid-cols-1 gap-4', classNames.grid)}>\n {items.map((item, index) => {\n const CardWrapper = item.link ? 'a' : 'div'\n const cardProps = item.link ? { href: item.link } : {}\n\n return (\n <React.Fragment key={index}>\n <CardWrapper\n {...cardProps}\n className={cn(\n 'blog-posts-card rounded-box',\n 'flex cursor-pointer flex-col gap-4',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n 'laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'laptop:overflow-hidden laptop:transition-opacity ',\n 'bg-container-secondary-1',\n getSpanClass(item.width || 'full'),\n getLayoutClass(item.width || 'full'),\n classNames.card\n )}\n onClick={handleCardClick(item, index)}\n >\n {/* \u56FE\u7247 */}\n <div\n className={cn(\n 'blog-posts-card-image',\n 'relative w-full overflow-hidden',\n 'h-[200px] shrink-0',\n getImageSizeClass(item.width || 'full'),\n classNames.cardImage\n )}\n >\n <Picture\n source={getImageSource(item.image)}\n alt={getImageAlt(item.image, item.title)}\n className=\"rounded-box h-full object-cover\"\n imgClassName=\"h-full\"\n />\n </div>\n\n {/* \u5185\u5BB9 */}\n <div\n className={cn(\n 'blog-posts-card-content',\n 'desktop:gap-6 flex flex-col justify-center gap-4',\n classNames.cardContent\n )}\n >\n <div className=\"desktop:gap-2 flex flex-col gap-1\">\n <Heading\n size={2}\n as=\"h6\"\n className={cn('blog-posts-card-title line-clamp-3', classNames.cardTitle)}\n html={item.title}\n />\n\n {item.description && (\n <Text\n className={cn(\n 'blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]',\n classNames.cardDescription\n )}\n html={item.description}\n />\n )}\n </div>\n {item.date && (\n <Text\n className={cn(\n 'blog-posts-card-meta',\n 'text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames.cardMeta\n )}\n html={item.date}\n />\n )}\n </div>\n </CardWrapper>\n\n {/* \u5206\u5272\u7EBF - \u4EC5 mobile/tablet \u663E\u793A */}\n {index < items.length - 1 && (\n <div\n className={cn(\n 'blog-posts-separator',\n 'bg-lines-primary laptop:hidden h-px w-full',\n classNames.separator\n )}\n />\n )}\n </React.Fragment>\n )\n })}\n </div>\n </div>\n )\n }\n)\n\nFeaturedBlogPosts.displayName = 'FeaturedBlogPosts'\nexport default FeaturedBlogPosts\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["FeaturedBlogPosts_exports", "__export", "FeaturedBlogPosts_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_picture", "import__", "getImageSource", "image", "breakpoints", "sources", "key", "width", "getImageAlt", "fallback", "keys", "getSpanClass", "span", "getLayoutClass", "getImageSizeClass", "FeaturedBlogPosts", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "handleCardClick", "item", "index", "event", "CardWrapper", "cardProps", "Picture"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type FeaturedBlogPostsSemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'grid'\n | 'card'\n | 'cardImage'\n | 'cardContent'\n | 'cardTitle'\n | 'cardDescription'\n | 'cardMeta'\n | 'separator'\n\n/**\n * \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\n */\nexport type FeaturedBlogPostSpan = 'full' | '2/3' | '1/3'\n\n/**\n * \u535A\u6587\u5361\u7247\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostItem {\n /** \u5C01\u9762\u56FE\u7247 */\n image: {\n mobile?: Img\n pad?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n /** \u6587\u7AE0\u6807\u9898 */\n title: string\n /** \u6587\u7AE0\u63CF\u8FF0 */\n description?: string\n /** \u65E5\u671F\u4FE1\u606F\uFF08\u5206\u7C7B\u00B7\u65E5\u671F\u00B7\u4F5C\u8005\uFF09 */\n date?: string\n /** \u6587\u7AE0\u94FE\u63A5 */\n link?: string\n /** \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF0C\u9ED8\u8BA4 full */\n width?: FeaturedBlogPostSpan\n}\n\n/**\n * FeaturedBlogPosts \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostsData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u535A\u6587\u5217\u8868 */\n items: FeaturedBlogPostItem[]\n}\n\nexport interface FeaturedBlogPostsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: FeaturedBlogPostsData\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<FeaturedBlogPostsSemanticName, string>>\n /** \u5361\u7247\u70B9\u51FB\u56DE\u8C03 */\n onItemClick?: (item: FeaturedBlogPostItem, index: number, event: React.MouseEvent) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u7C7B\u578B\n */\ntype ResponsiveImage = FeaturedBlogPostItem['image']\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024, url4 768, url5 390\"\n */\nconst getImageSource = (image: ResponsiveImage): string => {\n const breakpoints: { key: keyof ResponsiveImage; width: number }[] = [\n { key: 'lgDesktop', width: 1920 },\n { key: 'desktop', width: 1440 },\n { key: 'laptop', width: 1024 },\n { key: 'pad', width: 768 },\n { key: 'mobile', width: 390 },\n ]\n\n const sources = breakpoints\n .filter(({ key }) => image[key]?.url)\n .map(({ key, width }) => `${image[key]!.url} ${width}`)\n\n // \u5982\u679C\u6709 sources\uFF0C\u8FD4\u56DE\u62FC\u63A5\u7ED3\u679C\uFF1B\u5426\u5219\u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684 url\n if (sources.length > 0) {\n return sources.join(', ')\n }\n\n // fallback: \u8FD4\u56DE\u4EFB\u610F\u4E00\u4E2A\u6709\u6548\u7684 url\n for (const { key } of breakpoints) {\n if (image[key]?.url) return image[key]!.url\n }\n\n return ''\n}\n\n/**\n * \u4ECE\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u83B7\u53D6 alt \u6587\u672C\n */\nconst getImageAlt = (image: ResponsiveImage, fallback: string): string => {\n const keys: (keyof ResponsiveImage)[] = ['desktop', 'laptop', 'pad', 'mobile', 'lgDesktop']\n for (const key of keys) {\n if (image[key]?.alt) return image[key]!.alt!\n }\n return fallback\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247 grid \u5217\u6570 (laptop+)\n */\nconst getSpanClass = (span: FeaturedBlogPostSpan = 'full') => {\n const spanMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:col-span-3',\n '2/3': 'laptop:col-span-2',\n '1/3': 'laptop:col-span-1',\n }\n return spanMap[span]\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247\u5E03\u5C40\u65B9\u5411 (laptop+)\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u5176\u4ED6: \u5DE6\u53F3\u5E03\u5C40\n */\nconst getLayoutClass = (span: FeaturedBlogPostSpan = 'full') => {\n return span === '1/3' ? '' : 'laptop:flex-row'\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u56FE\u7247\u5C3A\u5BF8\u6837\u5F0F (laptop+)\n * full: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 2/3\n * 2/3: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 1/2\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u56FE\u7247\u9AD8\u5EA6\u586B\u6EE1\u5269\u4F59\u7A7A\u95F4\n */\nconst getImageSizeClass = (span: FeaturedBlogPostSpan = 'full') => {\n const sizeMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:h-full laptop:w-2/3',\n '2/3': 'laptop:h-full laptop:w-1/2',\n '1/3': 'laptop:flex-1 h-[200px] lg-desktop:h-[240px]',\n }\n return sizeMap[span]\n}\n\n/**\n * FeaturedBlogPosts - \u7CBE\u9009\u535A\u6587\n *\n * @description \u5C55\u793A\u7ECF\u8FC7\u7B5B\u9009\u7684\u4F18\u8D28\u6587\u7AE0\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u548C\u5E03\u5C40\u7684\u5361\u7247\u7EC4\u5408\n */\nconst FeaturedBlogPosts = React.forwardRef<HTMLDivElement, FeaturedBlogPostsProps>(\n ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n const { title, subtitle, items } = data\n\n const handleCardClick = React.useCallback(\n (item: FeaturedBlogPostItem, index: number) => (event: React.MouseEvent) => {\n onItemClick?.(item, index, event)\n },\n [onItemClick]\n )\n\n return (\n <div\n ref={ref}\n className={cn('blog-posts-root', 'text-info-primary w-full', className, classNames.root)}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('blog-posts-header mb-6', classNames.header)}>\n {title && <Heading as=\"h2\" size={4} html={title} className={cn('blog-posts-title', classNames.title)} />}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n <div className={cn('blog-posts-grid', 'laptop:grid-cols-3 grid grid-cols-1 gap-4', classNames.grid)}>\n {items.map((item, index) => {\n const CardWrapper = item.link ? 'a' : 'div'\n const cardProps = item.link ? { href: item.link } : {}\n\n return (\n <React.Fragment key={index}>\n <CardWrapper\n {...cardProps}\n className={cn(\n 'blog-posts-card rounded-box',\n 'flex cursor-pointer flex-col gap-4',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n 'laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'laptop:overflow-hidden laptop:transition-opacity ',\n 'bg-container-secondary-1',\n getSpanClass(item.width || 'full'),\n getLayoutClass(item.width || 'full'),\n classNames.card\n )}\n onClick={handleCardClick(item, index)}\n >\n {/* \u56FE\u7247 */}\n <div\n className={cn(\n 'blog-posts-card-image',\n 'relative w-full overflow-hidden',\n 'h-[200px] shrink-0',\n getImageSizeClass(item.width || 'full'),\n classNames.cardImage\n )}\n >\n <Picture\n source={getImageSource(item.image)}\n alt={getImageAlt(item.image, item.title)}\n className=\"rounded-box h-full object-cover\"\n imgClassName=\"h-full\"\n />\n </div>\n\n {/* \u5185\u5BB9 */}\n <div\n className={cn(\n 'blog-posts-card-content',\n 'desktop:gap-6 flex flex-col justify-center gap-4',\n classNames.cardContent\n )}\n >\n <div className=\"desktop:gap-2 flex flex-col gap-1\">\n <Heading\n size={2}\n as=\"h6\"\n className={cn('blog-posts-card-title line-clamp-3', classNames.cardTitle)}\n html={item.title}\n />\n\n {item.description && (\n <Text\n className={cn(\n 'blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]',\n classNames.cardDescription\n )}\n html={item.description}\n />\n )}\n </div>\n {item.date && (\n <Text\n className={cn(\n 'blog-posts-card-meta',\n 'text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames.cardMeta\n )}\n html={item.date}\n />\n )}\n </div>\n </CardWrapper>\n\n {/* \u5206\u5272\u7EBF - \u4EC5 mobile/tablet \u663E\u793A */}\n {index < items.length - 1 && (\n <div\n className={cn(\n 'blog-posts-separator',\n 'bg-lines-primary laptop:hidden h-px w-full',\n classNames.separator\n )}\n />\n )}\n </React.Fragment>\n )\n })}\n </div>\n </div>\n )\n }\n)\n\nFeaturedBlogPosts.displayName = 'FeaturedBlogPosts'\nexport default FeaturedBlogPosts\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FeaturedBlogPosts_exports", "__export", "FeaturedBlogPosts_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_picture", "import__", "import_Styles", "getImageSource", "image", "breakpoints", "sources", "key", "width", "getImageAlt", "fallback", "keys", "getSpanClass", "span", "getLayoutClass", "getImageSizeClass", "FeaturedBlogPosts", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "handleCardClick", "item", "index", "event", "CardWrapper", "cardProps", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var L=Object.create;var k=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var E=(t,s)=>{for(var l in s)k(t,l,{get:s[l],enumerable:!0})},N=(t,s,l,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of D(s))!z.call(t,a)&&a!==l&&k(t,a,{get:()=>s[a],enumerable:!(d=A(s,a))||d.enumerable});return t};var S=(t,s,l)=>(l=t!=null?L(F(t)):{},N(s||!t||!t.__esModule?k(l,"default",{value:t,enumerable:!0}):l,t)),$=t=>N(k({},"__esModule",{value:!0}),t);var q={};E(q,{default:()=>Q});module.exports=$(q);var e=require("react/jsx-runtime"),f=require("react"),i=require("../../components/index.js"),C=S(require("../Subscribe/index.js")),h=require("./types.js"),x=require("./icons/index.js"),v=require("react-responsive"),n=require("../../helpers/utils.js"),b=require("../AiuiProvider/index.js"),M=require("../../shared/Styles.js");const T=({data:{footer:t}={},currentCountry:s,event:l,subscribeLoading:d,classNames:a,className:r,...g})=>{const[p,c]=(0,f.useState)(!1),u=(0,v.useMediaQuery)({query:"(max-width: 1439px)"});(0,f.useEffect)(()=>{c(u)},[u]);const m=(0,f.useMemo)(()=>t?.blocks?.find(o=>o?.blockType===h.FooterNavigationBlockType.Brand)?.country||{},[t]);return(0,e.jsx)("footer",{...g,className:(0,n.cn)(a?.root,r),children:(0,e.jsxs)(i.Container,{className:(0,n.cn)(a?.child),childClassName:(0,n.cn)("laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8"),children:[(0,e.jsx)(i.Text,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.blocks?.map(o=>{if(o?.blockType===h.FooterNavigationBlockType.Signup)return(0,e.jsx)(P,{subscribeLoading:d,data:o,onSubmit:l?.signup},o.id);if(o?.blockType===h.FooterNavigationBlockType.Brand)return(0,e.jsx)(j,{data:o,isMobile:p,event:l,currentCountry:s},o?.id);if(o?.blockType===h.FooterNavigationBlockType.Main)return(0,e.jsx)(O,{data:{...o,country:m},event:l,isMobile:p,currentCountry:s},o.id)})]})})},P=({data:t,onSubmit:s,subscribeLoading:l})=>{const{locale:d="us"}=(0,b.useAiuiContext)();return(0,e.jsxs)("div",{className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8",children:[(0,e.jsx)(C.default,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:s,loading:l}),(0,e.jsx)("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(i.Text,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(a=>(0,e.jsxs)("div",{className:"flex-start flex gap-2",children:[(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt||"",className:"size-5 shrink-0"}),(0,e.jsx)(i.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})]},a?.id))})]}),(0,e.jsx)("div",{className:"desktop:block hidden w-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(i.Text,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(a=>(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(a?.link,d)}?ref=footer`,asChild:!a?.link,className:"no-underline",children:(0,e.jsx)(i.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},a?.id))})]})]})]})},O=({data:t,event:s,isMobile:l,currentCountry:d})=>{const{locale:a="us"}=(0,b.useAiuiContext)(),[r,g]=(0,f.useState)(!1),{services:p,mainNav:c,country:u}=t,m="contact-section";return(0,e.jsxs)("nav",{className:"flex flex-col gap-8","aria-label":"Main navigation",children:[(0,e.jsxs)("div",{className:(0,n.cn)({"desktop:gap-16 flex":p?.download?.title}),children:[(0,e.jsxs)("div",{className:(0,n.cn)("w-full",{"desktop:flex-[1260]":p?.download?.title}),children:[(0,e.jsx)(i.Text,{html:p?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:(0,n.cn)("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":p?.download?.title}),children:p?.storeBenefits?.reasons?.map(o=>(0,e.jsxs)("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[(0,e.jsx)("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt||"",className:"size-5 shrink-0"}),(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(o?.link,a)}?ref=footer`,asChild:!o?.link,className:"no-underline",children:(0,e.jsx)(i.Text,{html:o?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})})]},o?.id))})]}),(0,e.jsx)(w,{className:(0,n.cn)({"desktop:flex-[404] hidden desktop:block":p?.download?.title}),title:p?.download?.title,apps:p?.download?.apps})]}),(0,e.jsx)("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]","aria-hidden":"true"}),(0,e.jsxs)("div",{className:"desktop:grid grid-cols-4 gap-4",children:[(0,e.jsx)(y,{title:c?.products?.title,lists:c?.products?.products}),(0,e.jsx)(y,{title:c?.explore?.title,lists:c?.explore?.explores}),(0,e.jsx)(y,{title:c?.support?.title,lists:c?.support?.supports}),(0,e.jsxs)("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[(0,e.jsxs)("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[(0,e.jsx)(i.Text,{as:"p",html:c?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white",id:m}),l&&(0,e.jsx)("button",{onClick:()=>g(!r),"aria-expanded":r,"aria-controls":m,"aria-label":r?"Collapse contact section":"Expand contact section",children:r?(0,e.jsx)(x.SubtractIcon,{width:20,height:20}):(0,e.jsx)(x.AddIcon,{width:20,height:20})})]}),(r&&l||!l)&&(0,e.jsx)("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",role:"region","aria-labelledby":m,children:c?.contact?.contacts?.map(o=>(0,e.jsxs)(i.Link,{href:o?.link,className:"group flex items-start gap-2 no-underline",children:[(0,e.jsx)("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt,className:"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),(0,e.jsx)(i.Text,{html:o?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white"})]},o?.id))}),(0,e.jsx)(B,{country:d||u,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:l,onChangeCountry:s?.country}),(0,e.jsx)("div",{className:"desktop:hidden mt-8",children:(0,e.jsx)(w,{title:p?.download?.title,apps:p?.download?.apps})}),!!c?.socials?.length&&(0,e.jsx)("div",{className:"mt-8 flex items-center gap-2",role:"list","aria-label":"Social media links",children:c?.socials?.map(o=>(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(o?.link,a)}?ref=footer`,className:"group",role:"listitem","aria-label":o?.icon?.alt||"Social media",children:(0,e.jsx)("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt,className:"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"})},o?.id))}),(0,e.jsx)("div",{className:"mt-4 flex flex-wrap gap-2",role:"list","aria-label":"Payment methods",children:c?.payment?.map(o=>(0,e.jsx)(i.Link,{href:(0,n.getLocalizedPath)(o?.link,a),asChild:!o?.link,role:"listitem","aria-label":o?.icon?.alt||"Payment method",children:(0,e.jsx)("img",{src:o?.icon?.url,loading:"lazy",alt:o?.icon?.alt||"",className:"h-[28px] w-[44px] shrink-0"})},o?.id))})]})]})]})},j=({data:t,isMobile:s,event:l,currentCountry:d})=>{const{locale:a="us"}=(0,b.useAiuiContext)();return(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[(0,e.jsxs)("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(t?.brand?.link,a)}?ref=footer`,asChild:!t?.brand?.link,children:(0,e.jsx)(i.Text,{html:t?.brand?.currentBrand,className:"cursor-pointer text-[#B6B6BA] hover:text-white"})}),(0,e.jsx)("div",{className:"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]"}),(0,e.jsx)("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:t?.brand?.brands?.map(r=>(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(r?.link,a)}?ref=footer`,children:(0,e.jsx)(i.Text,{html:r?.icon,className:"text-[#B6B6BA] hover:text-white"})},r?.id))})]}),(0,e.jsx)(B,{country:d||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:s,onChangeCountry:l?.country})]}),(0,e.jsx)("div",{className:"h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[(0,e.jsx)(i.Text,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:[t?.policy?.policies?.map(r=>(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(r?.link,a)}?ref=footer`,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:r?.label},r?.id)),t?.policy?.cookies&&(0,e.jsx)("button",{"data-cc":"show-preferencesModal",onClick:l?.cookiesSet,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Cookie preferences: ${t?.policy?.cookies}`,children:t?.policy?.cookies})]})]})]})},y=({title:t,lists:s,className:l})=>{const{locale:d="us"}=(0,b.useAiuiContext)(),[a,r]=(0,f.useState)(!1),[g,p]=(0,f.useState)(!1),c=(0,v.useMediaQuery)({query:"(max-width: 1439px)"});(0,f.useEffect)(()=>{p(c)},[c]);const u=`nav-section-${t?.replace(/\s+/g,"-").toLowerCase()}`;return(0,e.jsxs)("div",{className:(0,n.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(i.Text,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white",id:u}),g&&(0,e.jsx)("button",{onClick:()=>r(!a),"aria-expanded":a,"aria-controls":u,"aria-label":a?`Collapse ${t}`:`Expand ${t}`,className:"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black",children:a?(0,e.jsx)(x.SubtractIcon,{width:20,height:20}):(0,e.jsx)(x.AddIcon,{width:20,height:20})})]}),(a&&g||!g)&&(0,e.jsx)("nav",{className:"mt-4 flex flex-col gap-2",role:"region","aria-labelledby":u,children:s?.map(m=>(0,e.jsx)(i.Link,{href:`${(0,n.getLocalizedPath)(m?.link,d)}?ref=footer`,className:"no-underline",children:(0,e.jsx)(i.Text,{html:m?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},m?.id))})]})},w=({title:t,apps:s,className:l})=>{const{locale:d="us"}=(0,b.useAiuiContext)();return s?.length?(0,e.jsxs)("div",{className:l,children:[(0,e.jsx)(i.Text,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",role:"list","aria-label":"Download apps",children:s?.map(a=>(0,e.jsxs)(i.Link,{href:(0,n.getLocalizedPath)(a?.link,d),className:"group flex flex-col items-center gap-[6px]",role:"listitem","aria-label":a?.icon?.alt||a?.label||"Download app",children:[(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt,className:"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),a?.label&&(0,e.jsx)(i.Text,{html:a?.label,className:"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white"})]},a?.id))})]}):null},B=({country:t,isMobile:s,className:l,onChangeCountry:d})=>(0,e.jsx)("div",{className:(0,n.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:(0,e.jsxs)("button",{onClick:()=>d?.(),className:"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Change country/region, current: ${t?.countryName||t?.country}`,children:[(0,e.jsxs)("div",{className:"group flex items-center gap-2",children:[(0,e.jsx)(x.CountryIcon,{width:20,height:20,className:"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100","aria-hidden":"true"}),(0,e.jsx)(i.Text,{as:"span",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200"})]}),s&&(0,e.jsx)(x.ArrowRightIcon,{width:20,height:20,"aria-hidden":"true"})]})});var Q=(0,M.withLayout)(T);
|
|
1
|
+
"use strict";var A=Object.create;var v=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var E=(t,s)=>{for(var l in s)v(t,l,{get:s[l],enumerable:!0})},w=(t,s,l,p)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of F(s))!z.call(t,i)&&i!==l&&v(t,i,{get:()=>s[i],enumerable:!(p=D(s,i))||p.enumerable});return t};var $=(t,s,l)=>(l=t!=null?A(S(t)):{},w(s||!t||!t.__esModule?v(l,"default",{value:t,enumerable:!0}):l,t)),T=t=>w(v({},"__esModule",{value:!0}),t);var R={};E(R,{default:()=>q});module.exports=T(R);var e=require("react/jsx-runtime"),x=require("react"),o=require("../../components/index.js"),M=$(require("../Subscribe/index.js")),k=require("./types.js"),m=require("./icons/index.js"),N=require("react-responsive"),d=require("../../helpers/utils.js"),g=require("../AiuiProvider/index.js"),L=require("../../shared/Styles.js");const P=({data:{footer:t}={},currentCountry:s,event:l,subscribeLoading:p,classNames:i,className:n,moduleIds:r,...b})=>{const[f,c]=(0,x.useState)(!1),u=(0,N.useMediaQuery)({query:"(max-width: 1439px)"});(0,x.useEffect)(()=>{c(u)},[u]);const h=(0,x.useMemo)(()=>t?.blocks?.find(a=>a?.blockType===k.FooterNavigationBlockType.Brand)?.country||{},[t]);return(0,e.jsx)("footer",{...b,className:(0,d.cn)(i?.root,n),children:(0,e.jsxs)(o.Container,{className:(0,d.cn)(i?.child),childClassName:(0,d.cn)("laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8"),children:[(0,e.jsx)(o.Text,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.blocks?.map(a=>{if(a?.blockType===k.FooterNavigationBlockType.Signup)return(0,e.jsx)(O,{subscribeLoading:p,data:a,onSubmit:l?.signup,id:r?.marketingConversion},a.id);if(a?.blockType===k.FooterNavigationBlockType.Brand)return(0,e.jsx)(Q,{data:a,isMobile:f,event:l,currentCountry:s,id:r?.footerBrand},a?.id);if(a?.blockType===k.FooterNavigationBlockType.Main)return(0,e.jsx)(j,{data:{...a,country:h},event:l,isMobile:f,currentCountry:s,id:r?.mainServices},a.id)})]})})},O=({data:t,onSubmit:s,subscribeLoading:l,id:p="footer-marketing-conversion"})=>{const{locale:i="us"}=(0,g.useAiuiContext)();return(0,e.jsxs)("div",{id:p,className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8",children:[(0,e.jsx)(M.default,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:s,loading:l}),(0,e.jsx)("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(o.Text,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(n=>(0,e.jsxs)("div",{className:"flex-start flex gap-2",children:[(0,e.jsx)("img",{src:n?.icon?.url,loading:"lazy",alt:n?.icon?.alt||"",className:"size-5 shrink-0"}),(0,e.jsx)(o.Text,{html:n?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})]},n?.id))})]}),(0,e.jsx)("div",{className:"desktop:block hidden w-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(o.Text,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(n=>(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(n?.link,i)}?ref=footer`,asChild:!n?.link,className:"no-underline",children:(0,e.jsx)(o.Text,{html:n?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},n?.id))})]})]})]})},j=({data:t,event:s,isMobile:l,currentCountry:p,id:i="footer-main-services"})=>{const{locale:n="us"}=(0,g.useAiuiContext)(),[r,b]=(0,x.useState)(!1),{services:f,mainNav:c,country:u}=t,h="contact-section";return(0,e.jsxs)("nav",{id:i,className:"flex flex-col gap-8","aria-label":"Main navigation",children:[(0,e.jsxs)("div",{className:(0,d.cn)({"desktop:gap-16 flex":f?.download?.title}),children:[(0,e.jsxs)("div",{className:(0,d.cn)("w-full",{"desktop:flex-[1260]":f?.download?.title}),children:[(0,e.jsx)(o.Text,{html:f?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:(0,d.cn)("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":f?.download?.title}),children:f?.storeBenefits?.reasons?.map(a=>(0,e.jsxs)("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt||"",className:"size-5 shrink-0"}),(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(a?.link,n)}?ref=footer`,asChild:!a?.link,className:"no-underline",children:(0,e.jsx)(o.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})})]},a?.id))})]}),(0,e.jsx)(B,{className:(0,d.cn)({"desktop:flex-[404] hidden desktop:block":f?.download?.title}),title:f?.download?.title,apps:f?.download?.apps})]}),(0,e.jsx)("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]","aria-hidden":"true"}),(0,e.jsxs)("div",{className:"desktop:grid grid-cols-4 gap-4",children:[(0,e.jsx)(y,{title:c?.products?.title,lists:c?.products?.products}),(0,e.jsx)(y,{title:c?.explore?.title,lists:c?.explore?.explores}),(0,e.jsx)(y,{title:c?.support?.title,lists:c?.support?.supports}),(0,e.jsxs)("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[(0,e.jsxs)("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[(0,e.jsx)(o.Text,{as:"p",html:c?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white",id:h}),l&&(0,e.jsx)("button",{onClick:()=>b(!r),"aria-expanded":r,"aria-controls":h,"aria-label":r?"Collapse contact section":"Expand contact section",children:r?(0,e.jsx)(m.SubtractIcon,{width:20,height:20}):(0,e.jsx)(m.AddIcon,{width:20,height:20})})]}),(r&&l||!l)&&(0,e.jsx)("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",role:"region","aria-labelledby":h,children:c?.contact?.contacts?.map(a=>(0,e.jsxs)(o.Link,{href:a?.link,className:"group flex items-start gap-2 no-underline",children:[(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt,className:"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),(0,e.jsx)(o.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white"})]},a?.id))}),(0,e.jsx)(C,{country:p||u,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:l,onChangeCountry:s?.country}),(0,e.jsx)("div",{className:"desktop:hidden mt-8",children:(0,e.jsx)(B,{title:f?.download?.title,apps:f?.download?.apps})}),!!c?.socials?.length&&(0,e.jsx)("div",{className:"mt-8 flex items-center gap-2",role:"list","aria-label":"Social media links",children:c?.socials?.map(a=>(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(a?.link,n)}?ref=footer`,className:"group",role:"listitem","aria-label":a?.icon?.alt||"Social media",children:(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt,className:"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"})},a?.id))}),(0,e.jsx)("div",{className:"mt-4 flex flex-wrap gap-2",role:"list","aria-label":"Payment methods",children:c?.payment?.map(a=>(0,e.jsx)(o.Link,{href:(0,d.getLocalizedPath)(a?.link,n),asChild:!a?.link,role:"listitem","aria-label":a?.icon?.alt||"Payment method",children:(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt||"",className:"h-[28px] w-[44px] shrink-0"})},a?.id))})]})]})]})},Q=({data:t,isMobile:s,event:l,currentCountry:p,id:i="footer-brand"})=>{const{locale:n="us"}=(0,g.useAiuiContext)();return(0,e.jsxs)("div",{id:i,className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[(0,e.jsxs)("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(t?.brand?.link,n)}?ref=footer`,asChild:!t?.brand?.link,children:(0,e.jsx)(o.Text,{html:t?.brand?.currentBrand,className:"cursor-pointer text-[#B6B6BA] hover:text-white"})}),(0,e.jsx)("div",{className:"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]"}),(0,e.jsx)("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:t?.brand?.brands?.map(r=>(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(r?.link,n)}?ref=footer`,children:(0,e.jsx)(o.Text,{html:r?.icon,className:"text-[#B6B6BA] hover:text-white"})},r?.id))})]}),(0,e.jsx)(C,{country:p||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:s,onChangeCountry:l?.country})]}),(0,e.jsx)("div",{className:"h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[(0,e.jsx)(o.Text,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:[t?.policy?.policies?.map(r=>(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(r?.link,n)}?ref=footer`,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:r?.label},r?.id)),t?.policy?.cookies&&(0,e.jsx)("button",{"data-cc":"show-preferencesModal",onClick:l?.cookiesSet,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Cookie preferences: ${t?.policy?.cookies}`,children:t?.policy?.cookies})]})]})]})},y=({title:t,lists:s,className:l})=>{const{locale:p="us"}=(0,g.useAiuiContext)(),[i,n]=(0,x.useState)(!1),[r,b]=(0,x.useState)(!1),f=(0,N.useMediaQuery)({query:"(max-width: 1439px)"});(0,x.useEffect)(()=>{b(f)},[f]);const c=`nav-section-${t?.replace(/\s+/g,"-").toLowerCase()}`;return(0,e.jsxs)("div",{className:(0,d.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(o.Text,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white",id:c}),r&&(0,e.jsx)("button",{onClick:()=>n(!i),"aria-expanded":i,"aria-controls":c,"aria-label":i?`Collapse ${t}`:`Expand ${t}`,className:"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black",children:i?(0,e.jsx)(m.SubtractIcon,{width:20,height:20}):(0,e.jsx)(m.AddIcon,{width:20,height:20})})]}),(i&&r||!r)&&(0,e.jsx)("nav",{className:"mt-4 flex flex-col gap-2",role:"region","aria-labelledby":c,children:s?.map(u=>(0,e.jsx)(o.Link,{href:`${(0,d.getLocalizedPath)(u?.link,p)}?ref=footer`,className:"no-underline",children:(0,e.jsx)(o.Text,{html:u?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},u?.id))})]})},B=({title:t,apps:s,className:l})=>{const{locale:p="us"}=(0,g.useAiuiContext)();return s?.length?(0,e.jsxs)("div",{className:l,children:[(0,e.jsx)(o.Text,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",role:"list","aria-label":"Download apps",children:s?.map(i=>(0,e.jsxs)(o.Link,{href:(0,d.getLocalizedPath)(i?.link,p),className:"group flex flex-col items-center gap-[6px]",role:"listitem","aria-label":i?.icon?.alt||i?.label||"Download app",children:[(0,e.jsx)("img",{src:i?.icon?.url,loading:"lazy",alt:i?.icon?.alt,className:"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),i?.label&&(0,e.jsx)(o.Text,{html:i?.label,className:"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white"})]},i?.id))})]}):null},C=({country:t,isMobile:s,className:l,onChangeCountry:p})=>(0,e.jsx)("div",{className:(0,d.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",l),children:(0,e.jsxs)("button",{onClick:()=>p?.(),className:"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Change country/region, current: ${t?.countryName||t?.country}`,children:[(0,e.jsxs)("div",{className:"group flex items-center gap-2",children:[(0,e.jsx)(m.CountryIcon,{width:20,height:20,className:"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100","aria-hidden":"true"}),(0,e.jsx)(o.Text,{as:"span",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200"})]}),s&&(0,e.jsx)(m.ArrowRightIcon,{width:20,height:20,"aria-hidden":"true"})]})});var q=(0,L.withLayout)(P);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({\n data: { footer } = {},\n currentCountry,\n event,\n subscribeLoading,\n classNames,\n className,\n ...rest\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return footer?.blocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)?.country || {}\n }, [footer])\n\n return (\n <footer {...rest} className={cn(classNames?.root, className)}>\n <Container\n className={cn(classNames?.child)}\n childClassName={cn('laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8')}\n >\n <Text html={footer?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footer?.blocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return (\n <MarketingConversion\n key={block.id}\n subscribeLoading={subscribeLoading}\n data={block}\n onSubmit={event?.signup}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return (\n <FooterBrand\n key={block?.id}\n data={block}\n isMobile={isMobile}\n event={event}\n currentCountry={currentCountry}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n key={block.id}\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n </footer>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({\n data,\n onSubmit,\n subscribeLoading,\n}: {\n data: any\n onSubmit?: (_params: any) => void\n subscribeLoading?: boolean\n}) => {\n const { locale = 'us' } = useAiuiContext()\n\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8\">\n <Subscribe\n subscribeMetadata={data?.signup}\n className=\"desktop:flex-[744]\"\n onSubmit={onSubmit}\n loading={subscribeLoading}\n />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <img\n src={enjoyItem?.icon?.url}\n loading=\"lazy\"\n alt={enjoyItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"desktop:block hidden w-px bg-[#3D3E3F]\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={`${getLocalizedPath(benefitItem?.link, locale)}?ref=footer`}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const { locale = 'us' } = useAiuiContext()\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n const contactSectionId = 'contact-section'\n\n return (\n <nav className=\"flex flex-col gap-8\" aria-label=\"Main navigation\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <img\n src={reasonItem?.icon?.url}\n loading=\"lazy\"\n alt={reasonItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Link\n href={`${getLocalizedPath(reasonItem?.link, locale)}?ref=footer`}\n asChild={!reasonItem?.link}\n className=\"no-underline\"\n >\n <Text\n html={reasonItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" aria-hidden=\"true\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n id={contactSectionId}\n />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={contactSectionId}\n aria-label={mainNavMenuOpen ? 'Collapse contact section' : 'Expand contact section'}\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div\n className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\"\n role=\"region\"\n aria-labelledby={contactSectionId}\n >\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <Link\n key={contactItem?.id}\n href={contactItem?.link}\n className=\"group flex items-start gap-2 no-underline\"\n >\n <img\n src={contactItem?.icon?.url}\n loading=\"lazy\"\n alt={contactItem?.icon?.alt}\n className=\"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\" role=\"list\" aria-label=\"Social media links\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link\n href={`${getLocalizedPath(socialItem?.link, locale)}?ref=footer`}\n key={socialItem?.id}\n className=\"group\"\n role=\"listitem\"\n aria-label={socialItem?.icon?.alt || 'Social media'}\n >\n <img\n src={socialItem?.icon?.url}\n loading=\"lazy\"\n alt={socialItem?.icon?.alt}\n className=\"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Payment methods\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link\n href={getLocalizedPath(paymentItem?.link, locale)}\n asChild={!paymentItem?.link}\n key={paymentItem?.id}\n role=\"listitem\"\n aria-label={paymentItem?.icon?.alt || 'Payment method'}\n >\n <img\n src={paymentItem?.icon?.url}\n loading=\"lazy\"\n alt={paymentItem?.icon?.alt || ''}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </nav>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n const { locale = 'us' } = useAiuiContext()\n\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4\">\n <Link href={`${getLocalizedPath(data?.brand?.link, locale)}?ref=footer`} asChild={!data?.brand?.link}>\n <Text html={data?.brand?.currentBrand} className=\"cursor-pointer text-[#B6B6BA] hover:text-white\" />\n </Link>\n <div className=\"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={`${getLocalizedPath(brandItem?.link, locale)}?ref=footer`} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={`${getLocalizedPath(policyItem?.link, locale)}?ref=footer`}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {policyItem?.label}\n </Link>\n ))}\n {data?.policy?.cookies && (\n <button\n data-cc=\"show-preferencesModal\"\n onClick={event?.cookiesSet}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Cookie preferences: ${data?.policy?.cookies}`}\n >\n {data?.policy?.cookies}\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const { locale = 'us' } = useAiuiContext()\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const sectionId = `nav-section-${title?.replace(/\\s+/g, '-').toLowerCase()}`\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\">\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" id={sectionId} />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={sectionId}\n aria-label={mainNavMenuOpen ? `Collapse ${title}` : `Expand ${title}`}\n className=\"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <nav className=\"mt-4 flex flex-col gap-2\" role=\"region\" aria-labelledby={sectionId}>\n {lists?.map((item: any) => (\n <Link href={`${getLocalizedPath(item?.link, locale)}?ref=footer`} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </nav>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n const { locale = 'us' } = useAiuiContext()\n\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\" role=\"list\" aria-label=\"Download apps\">\n {apps?.map((appItem: any) => (\n <Link\n key={appItem?.id}\n href={getLocalizedPath(appItem?.link, locale)}\n className=\"group flex flex-col items-center gap-[6px]\"\n role=\"listitem\"\n aria-label={appItem?.icon?.alt || appItem?.label || 'Download app'}\n >\n <img\n src={appItem?.icon?.url}\n loading=\"lazy\"\n alt={appItem?.icon?.alt}\n className=\"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n {appItem?.label && (\n <Text\n html={appItem?.label}\n className=\"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white\"\n />\n )}\n </Link>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <button\n onClick={() => onChangeCountry?.()}\n className=\"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Change country/region, current: ${country?.countryName || country?.country}`}\n >\n <div className=\"group flex items-center gap-2\">\n <CountryIcon\n width={20}\n height={20}\n className=\"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n aria-hidden=\"true\"\n />\n <Text\n as=\"span\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200\"\n />\n </div>\n {isMobile && <ArrowRightIcon width={20} height={20} aria-hidden=\"true\" />}\n </button>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["FooterNavigation_exports", "__export", "FooterNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Subscribe", "import_types", "import_icons", "import_react_responsive", "import_utils", "import_AiuiProvider", "import_Styles", "FooterNavigation", "footer", "currentCountry", "event", "subscribeLoading", "classNames", "className", "rest", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "locale", "Subscribe", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "contactSectionId", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "sectionId", "item", "apps", "appItem", "onChangeCountry"]
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({\n data: { footer } = {},\n currentCountry,\n event,\n subscribeLoading,\n classNames,\n className,\n moduleIds,\n ...rest\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return footer?.blocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)?.country || {}\n }, [footer])\n\n return (\n <footer {...rest} className={cn(classNames?.root, className)}>\n <Container\n className={cn(classNames?.child)}\n childClassName={cn('laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8')}\n >\n <Text html={footer?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footer?.blocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return (\n <MarketingConversion\n key={block.id}\n subscribeLoading={subscribeLoading}\n data={block}\n onSubmit={event?.signup}\n id={moduleIds?.marketingConversion}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return (\n <FooterBrand\n key={block?.id}\n data={block}\n isMobile={isMobile}\n event={event}\n currentCountry={currentCountry}\n id={moduleIds?.footerBrand}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n key={block.id}\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n id={moduleIds?.mainServices}\n />\n )\n }\n })}\n </Container>\n </footer>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({\n data,\n onSubmit,\n subscribeLoading,\n id = 'footer-marketing-conversion',\n}: {\n data: any\n onSubmit?: (_params: any) => void\n subscribeLoading?: boolean\n id?: string\n}) => {\n const { locale = 'us' } = useAiuiContext()\n\n return (\n <div\n id={id}\n className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8\"\n >\n <Subscribe\n subscribeMetadata={data?.signup}\n className=\"desktop:flex-[744]\"\n onSubmit={onSubmit}\n loading={subscribeLoading}\n />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <img\n src={enjoyItem?.icon?.url}\n loading=\"lazy\"\n alt={enjoyItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"desktop:block hidden w-px bg-[#3D3E3F]\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={`${getLocalizedPath(benefitItem?.link, locale)}?ref=footer`}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n id = 'footer-main-services',\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n id?: string\n}) => {\n const { locale = 'us' } = useAiuiContext()\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n const contactSectionId = 'contact-section'\n\n return (\n <nav id={id} className=\"flex flex-col gap-8\" aria-label=\"Main navigation\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <img\n src={reasonItem?.icon?.url}\n loading=\"lazy\"\n alt={reasonItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Link\n href={`${getLocalizedPath(reasonItem?.link, locale)}?ref=footer`}\n asChild={!reasonItem?.link}\n className=\"no-underline\"\n >\n <Text\n html={reasonItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" aria-hidden=\"true\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n id={contactSectionId}\n />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={contactSectionId}\n aria-label={mainNavMenuOpen ? 'Collapse contact section' : 'Expand contact section'}\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div\n className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\"\n role=\"region\"\n aria-labelledby={contactSectionId}\n >\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <Link\n key={contactItem?.id}\n href={contactItem?.link}\n className=\"group flex items-start gap-2 no-underline\"\n >\n <img\n src={contactItem?.icon?.url}\n loading=\"lazy\"\n alt={contactItem?.icon?.alt}\n className=\"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\" role=\"list\" aria-label=\"Social media links\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link\n href={`${getLocalizedPath(socialItem?.link, locale)}?ref=footer`}\n key={socialItem?.id}\n className=\"group\"\n role=\"listitem\"\n aria-label={socialItem?.icon?.alt || 'Social media'}\n >\n <img\n src={socialItem?.icon?.url}\n loading=\"lazy\"\n alt={socialItem?.icon?.alt}\n className=\"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Payment methods\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link\n href={getLocalizedPath(paymentItem?.link, locale)}\n asChild={!paymentItem?.link}\n key={paymentItem?.id}\n role=\"listitem\"\n aria-label={paymentItem?.icon?.alt || 'Payment method'}\n >\n <img\n src={paymentItem?.icon?.url}\n loading=\"lazy\"\n alt={paymentItem?.icon?.alt || ''}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </nav>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n id = 'footer-brand',\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n id?: string\n}) => {\n const { locale = 'us' } = useAiuiContext()\n\n return (\n <div id={id} className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4\">\n <Link href={`${getLocalizedPath(data?.brand?.link, locale)}?ref=footer`} asChild={!data?.brand?.link}>\n <Text html={data?.brand?.currentBrand} className=\"cursor-pointer text-[#B6B6BA] hover:text-white\" />\n </Link>\n <div className=\"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={`${getLocalizedPath(brandItem?.link, locale)}?ref=footer`} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={`${getLocalizedPath(policyItem?.link, locale)}?ref=footer`}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {policyItem?.label}\n </Link>\n ))}\n {data?.policy?.cookies && (\n <button\n data-cc=\"show-preferencesModal\"\n onClick={event?.cookiesSet}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Cookie preferences: ${data?.policy?.cookies}`}\n >\n {data?.policy?.cookies}\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const { locale = 'us' } = useAiuiContext()\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const sectionId = `nav-section-${title?.replace(/\\s+/g, '-').toLowerCase()}`\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\">\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" id={sectionId} />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={sectionId}\n aria-label={mainNavMenuOpen ? `Collapse ${title}` : `Expand ${title}`}\n className=\"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <nav className=\"mt-4 flex flex-col gap-2\" role=\"region\" aria-labelledby={sectionId}>\n {lists?.map((item: any) => (\n <Link href={`${getLocalizedPath(item?.link, locale)}?ref=footer`} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </nav>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n const { locale = 'us' } = useAiuiContext()\n\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\" role=\"list\" aria-label=\"Download apps\">\n {apps?.map((appItem: any) => (\n <Link\n key={appItem?.id}\n href={getLocalizedPath(appItem?.link, locale)}\n className=\"group flex flex-col items-center gap-[6px]\"\n role=\"listitem\"\n aria-label={appItem?.icon?.alt || appItem?.label || 'Download app'}\n >\n <img\n src={appItem?.icon?.url}\n loading=\"lazy\"\n alt={appItem?.icon?.alt}\n className=\"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n {appItem?.label && (\n <Text\n html={appItem?.label}\n className=\"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white\"\n />\n )}\n </Link>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <button\n onClick={() => onChangeCountry?.()}\n className=\"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Change country/region, current: ${country?.countryName || country?.country}`}\n >\n <div className=\"group flex items-center gap-2\">\n <CountryIcon\n width={20}\n height={20}\n className=\"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n aria-hidden=\"true\"\n />\n <Text\n as=\"span\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200\"\n />\n </div>\n {isMobile && <ArrowRightIcon width={20} height={20} aria-hidden=\"true\" />}\n </button>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FooterNavigation_exports", "__export", "FooterNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Subscribe", "import_types", "import_icons", "import_react_responsive", "import_utils", "import_AiuiProvider", "import_Styles", "FooterNavigation", "footer", "currentCountry", "event", "subscribeLoading", "classNames", "className", "moduleIds", "rest", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "id", "locale", "Subscribe", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "contactSectionId", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "sectionId", "item", "apps", "appItem", "onChangeCountry"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
export type FooterNavigationSemanticName = 'root' | 'child';
|
|
3
|
+
export interface FooterNavigationModuleIds {
|
|
4
|
+
marketingConversion?: string;
|
|
5
|
+
mainServices?: string;
|
|
6
|
+
footerBrand?: string;
|
|
7
|
+
}
|
|
3
8
|
export interface FooterNavigationProps extends React.HTMLAttributes<HTMLElement> {
|
|
4
9
|
data: any;
|
|
5
10
|
currentCountry?: any;
|
|
@@ -11,6 +16,8 @@ export interface FooterNavigationProps extends React.HTMLAttributes<HTMLElement>
|
|
|
11
16
|
cookiesSet?: () => void;
|
|
12
17
|
};
|
|
13
18
|
classNames?: Partial<Record<FooterNavigationSemanticName, string>>;
|
|
19
|
+
/** 各模块的 id,用于 URL #锚点定位 */
|
|
20
|
+
moduleIds?: FooterNavigationModuleIds;
|
|
14
21
|
}
|
|
15
22
|
export declare enum FooterNavigationBlockType {
|
|
16
23
|
Signup = "ipc-footer-signup",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var i in e)n(t,i,{get:e[i],enumerable:!0})},p=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of d(e))!c.call(t,r)&&r!==i&&n(t,r,{get:()=>e[r],enumerable:!(o=s(e,r))||o.enumerable});return t};var u=t=>p(n({},"__esModule",{value:!0}),t);var g={};m(g,{FooterNavigationBlockType:()=>a});module.exports=u(g);var a=(o=>(o.Signup="ipc-footer-signup",o.Main="ipc-footer-main",o.Brand="ipc-footer-brand",o))(a||{});
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react'\n\nexport type FooterNavigationSemanticName = 'root' | 'child'\n\nexport interface FooterNavigationProps extends React.HTMLAttributes<HTMLElement> {\n data: any\n currentCountry?: any\n subscribeLoading?: boolean\n event?: {\n signup?: (_params: any) => void\n download?: () => void\n country?: () => void\n cookiesSet?: () => void\n }\n classNames?: Partial<Record<FooterNavigationSemanticName, string>>\n}\n\nexport enum FooterNavigationBlockType {\n Signup = 'ipc-footer-signup',\n Main = 'ipc-footer-main',\n Brand = 'ipc-footer-brand',\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import type React from 'react'\n\nexport type FooterNavigationSemanticName = 'root' | 'child'\n\nexport interface FooterNavigationModuleIds {\n marketingConversion?: string\n mainServices?: string\n footerBrand?: string\n}\n\nexport interface FooterNavigationProps extends React.HTMLAttributes<HTMLElement> {\n data: any\n currentCountry?: any\n subscribeLoading?: boolean\n event?: {\n signup?: (_params: any) => void\n download?: () => void\n country?: () => void\n cookiesSet?: () => void\n }\n classNames?: Partial<Record<FooterNavigationSemanticName, string>>\n /** \u5404\u6A21\u5757\u7684 id\uFF0C\u7528\u4E8E URL #\u951A\u70B9\u5B9A\u4F4D */\n moduleIds?: FooterNavigationModuleIds\n}\n\nexport enum FooterNavigationBlockType {\n Signup = 'ipc-footer-signup',\n Main = 'ipc-footer-main',\n Brand = 'ipc-footer-brand',\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,GAyBO,IAAKE,OACVA,EAAA,OAAS,oBACTA,EAAA,KAAO,kBACPA,EAAA,MAAQ,mBAHEA,OAAA",
|
|
6
6
|
"names": ["types_exports", "__export", "FooterNavigationBlockType", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import 'swiper/css/pagination';
|
|
3
2
|
import type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName } from './types.js';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
*
|
|
7
|
-
* @description 媒体背书组件的作用是通过展示第三方媒体的评价或报道,提升品牌或产品的可信度和影响力
|
|
8
|
-
*/
|
|
9
|
-
declare const MediaEndorsement: React.ForwardRefExoticComponent<MediaEndorsementProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export default MediaEndorsement;
|
|
3
|
+
declare const _default: any;
|
|
4
|
+
export default _default;
|
|
11
5
|
export type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var R=Object.create;var u=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";"use client";var R=Object.create;var u=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var i in e)u(t,i,{get:e[i],enumerable:!0})},v=(t,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of j(e))!H.call(t,s)&&s!==i&&u(t,s,{get:()=>e[s],enumerable:!(n=V(e,s))||n.enumerable});return t};var q=(t,e,i)=>(i=t!=null?R(A(t)):{},v(e||!t||!t.__esModule?u(i,"default",{value:t,enumerable:!0}):i,t)),Q=t=>v(u({},"__esModule",{value:!0}),t);var $={};_($,{default:()=>O});module.exports=Q($);var r=require("react/jsx-runtime"),x=q(require("react")),y=require("class-variance-authority"),l=require("swiper/react"),m=require("swiper/modules"),E=require("react-responsive"),K=require("swiper/css/pagination"),d=require("../../helpers/index.js"),p=require("../../index.js"),S=require("../../shared/Styles.js");const M=3;function F(t,e){const i=[];for(let n=0;n<t.length;n+=e)i.push(t.slice(n,n+e));return i}const G=(0,y.cva)("rounded-box lg-desktop:h-[240px] desktop:px-6 bg-container-secondary-0 flex h-[200px] flex-col justify-start gap-[26px] p-4",{variants:{theme:{light:"",dark:""},rounded:{true:"rounded-card",false:""}},defaultVariants:{theme:"light",rounded:!1}}),k=x.forwardRef(({className:t,classNames:e={},data:i,onItemClick:n,...s},N)=>{const{title:f,subtitle:b,items:g,theme:h="light",rounded:I=!1,layout:T="grid"}=i,D=(0,E.useMediaQuery)({query:"(max-width: 767px)"}),P=x.useCallback((a,o)=>c=>{n?.(a,o,c)},[n]),w=(a,o)=>(0,r.jsxs)("div",{className:(0,d.cn)("media-endorsement-card text-info-primary",G({theme:h,rounded:I}),e.card),onClick:P(a,o),"aria-label":a.mediaName?`${a.mediaName} endorsement`:void 0,children:[(0,r.jsx)("div",{className:(0,d.cn)("media-endorsement-card-icon rounded-full","lg-desktop::size-14 flex size-12 items-center justify-center overflow-hidden",e.cardIcon),children:(0,r.jsx)("img",{src:a.icon.url,alt:a.icon.alt||a.mediaName||"Media logo",className:"size-full object-contain",loading:"lazy"})}),(0,r.jsx)(p.Heading,{size:2,as:"h6",className:(0,d.cn)("media-endorsement-card-quote line-clamp-4",e.cardQuote),children:a.text})]},o),z=()=>{const a=F(g,M);return(0,r.jsx)(l.Swiper,{className:(0,d.cn)("media-endorsement-mobile-swiper","w-full !overflow-visible pb-8",e.carousel),modules:[m.Pagination],slidesPerView:1,spaceBetween:12,pagination:{clickable:!0,bulletClass:"media-endorsement-bullet",bulletActiveClass:"media-endorsement-bullet-active"},children:a.map((o,c)=>(0,r.jsx)(l.SwiperSlide,{className:"!h-auto",children:(0,r.jsx)("div",{className:"flex flex-col gap-3",children:o.map((C,B)=>{const L=c*M+B;return w(C,L)})})},c))})};return(0,r.jsxs)("div",{ref:N,className:(0,d.cn)("media-endorsement-root text-info-primary","w-full",t,e.root,{"aiui-dark":h==="dark"}),...s,children:[(0,r.jsx)("style",{children:`
|
|
2
2
|
.media-endorsement-bullet {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
width: 8px;
|
|
@@ -19,5 +19,5 @@
|
|
|
19
19
|
right: 0;
|
|
20
20
|
text-align: center;
|
|
21
21
|
}
|
|
22
|
-
`}),(f||b)&&(0,r.jsxs)("div",{className:(0,d.cn)("media-endorsement-header mb-6",e.header),children:[f&&(0,r.jsx)(p.Heading,{as:"h2",size:4,html:f,className:(0,d.cn)("media-endorsement-title",e.title)}),b&&(0,r.jsx)(p.Text,{as:"p",size:3,className:(0,d.cn)("",e?.subtitle),html:b})]}),
|
|
22
|
+
`}),(f||b)&&(0,r.jsxs)("div",{className:(0,d.cn)("media-endorsement-header mb-6",e.header),children:[f&&(0,r.jsx)(p.Heading,{as:"h2",size:4,html:f,className:(0,d.cn)("media-endorsement-title",e.title)}),b&&(0,r.jsx)(p.Text,{as:"p",size:3,className:(0,d.cn)("",e?.subtitle),html:b})]}),T==="carousel"?(0,r.jsx)(l.Swiper,{className:(0,d.cn)("media-endorsement-carousel","w-full !overflow-visible",e.carousel),modules:[m.FreeMode,m.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},slidesPerView:"auto",spaceBetween:12,breakpoints:{768:{spaceBetween:16}},children:g.map((a,o)=>(0,r.jsx)(l.SwiperSlide,{className:"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]",children:w(a,o)},o))}):D?z():(0,r.jsx)("div",{className:(0,d.cn)("media-endorsement-grid","laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3",e.grid),children:g.map((a,o)=>w(a,o))})]})});k.displayName="MediaEndorsement";var O=(0,S.withLayout)(k);
|
|
23
23
|
//# sourceMappingURL=index.js.map
|