@anker-in/headless-ui 0.0.27-alpha.0 → 0.0.27-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.d.ts +25 -0
- package/dist/cjs/biz-components/AccordionCards/index.js +2 -0
- package/dist/cjs/biz-components/AccordionCards/index.js.map +7 -0
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +2 -2
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -0
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.d.ts +15 -0
- package/dist/cjs/biz-components/Graphic/index.js +2 -0
- package/dist/cjs/biz-components/Graphic/index.js.map +7 -0
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/Marquee/index.js +1 -1
- package/dist/cjs/biz-components/Marquee/index.js.map +3 -3
- package/dist/cjs/biz-components/MemberEquity/index.js +30 -30
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +9 -9
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- package/dist/cjs/biz-components/index.d.ts +3 -1
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/badge.d.ts +1 -1
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/button.d.ts +1 -1
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/card.js +1 -1
- package/dist/cjs/components/card.js.map +2 -2
- package/dist/cjs/components/carousel.js +1 -1
- package/dist/cjs/components/carousel.js.map +2 -2
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/cjs/components/dialog.js +1 -1
- package/dist/cjs/components/dialog.js.map +2 -2
- package/dist/cjs/components/gird.js +1 -1
- package/dist/cjs/components/gird.js.map +2 -2
- package/dist/cjs/components/heading.d.ts +1 -1
- package/dist/cjs/components/heading.js +1 -1
- package/dist/cjs/components/heading.js.map +2 -2
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/helpers/utils.js +1 -1
- package/dist/cjs/helpers/utils.js.map +2 -2
- package/dist/cjs/stories/accordionCards.stories.d.ts +28 -0
- package/dist/cjs/stories/accordionCards.stories.js +2 -0
- package/dist/cjs/stories/accordionCards.stories.js.map +7 -0
- package/dist/cjs/stories/badge.stories.d.ts +17 -2
- package/dist/cjs/stories/badge.stories.js +1 -1
- package/dist/cjs/stories/badge.stories.js.map +2 -2
- package/dist/cjs/stories/button.stories.d.ts +3 -1
- package/dist/cjs/stories/button.stories.js +1 -1
- package/dist/cjs/stories/button.stories.js.map +3 -3
- package/dist/cjs/stories/container.stories.js +6 -6
- package/dist/cjs/stories/container.stories.js.map +2 -2
- package/dist/cjs/stories/dialog.stories.js +1 -1
- package/dist/cjs/stories/dialog.stories.js.map +2 -2
- package/dist/cjs/stories/evaluate.stories.js +1 -1
- package/dist/cjs/stories/evaluate.stories.js.map +2 -2
- package/dist/cjs/stories/graphic.stories.d.ts +49 -0
- package/dist/cjs/stories/graphic.stories.js +2 -0
- package/dist/cjs/stories/graphic.stories.js.map +7 -0
- package/dist/cjs/stories/heading.stories.d.ts +3 -2
- package/dist/cjs/stories/heading.stories.js +1 -1
- package/dist/cjs/stories/heading.stories.js.map +2 -2
- package/dist/cjs/stories/text.stories.js +1 -1
- package/dist/cjs/stories/text.stories.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.d.ts +25 -0
- package/dist/esm/biz-components/AccordionCards/index.js +2 -0
- package/dist/esm/biz-components/AccordionCards/index.js.map +7 -0
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -0
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.d.ts +15 -0
- package/dist/esm/biz-components/Graphic/index.js +2 -0
- package/dist/esm/biz-components/Graphic/index.js.map +7 -0
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/types.d.ts +1 -1
- package/dist/esm/biz-components/Marquee/index.js +1 -1
- package/dist/esm/biz-components/Marquee/index.js.map +3 -3
- package/dist/esm/biz-components/MemberEquity/index.js +29 -29
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +9 -9
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +3 -1
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/components/badge.d.ts +1 -1
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/button.d.ts +1 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/card.js +1 -1
- package/dist/esm/components/card.js.map +2 -2
- package/dist/esm/components/carousel.js +1 -1
- package/dist/esm/components/carousel.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/dialog.js.map +2 -2
- package/dist/esm/components/gird.js +1 -1
- package/dist/esm/components/gird.js.map +2 -2
- package/dist/esm/components/heading.d.ts +1 -1
- package/dist/esm/components/heading.js +1 -1
- package/dist/esm/components/heading.js.map +2 -2
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/helpers/utils.js +1 -1
- package/dist/esm/helpers/utils.js.map +2 -2
- package/dist/esm/stories/accordionCards.stories.d.ts +28 -0
- package/dist/esm/stories/accordionCards.stories.js +2 -0
- package/dist/esm/stories/accordionCards.stories.js.map +7 -0
- package/dist/esm/stories/badge.stories.d.ts +17 -2
- package/dist/esm/stories/badge.stories.js +1 -1
- package/dist/esm/stories/badge.stories.js.map +3 -3
- package/dist/esm/stories/button.stories.d.ts +3 -1
- package/dist/esm/stories/button.stories.js +1 -1
- package/dist/esm/stories/button.stories.js.map +3 -3
- package/dist/esm/stories/container.stories.js +6 -6
- package/dist/esm/stories/container.stories.js.map +2 -2
- package/dist/esm/stories/dialog.stories.js +1 -1
- package/dist/esm/stories/dialog.stories.js.map +2 -2
- package/dist/esm/stories/evaluate.stories.js +1 -1
- package/dist/esm/stories/evaluate.stories.js.map +2 -2
- package/dist/esm/stories/graphic.stories.d.ts +49 -0
- package/dist/esm/stories/graphic.stories.js +2 -0
- package/dist/esm/stories/graphic.stories.js.map +7 -0
- package/dist/esm/stories/heading.stories.d.ts +3 -2
- package/dist/esm/stories/heading.stories.js +1 -1
- package/dist/esm/stories/heading.stories.js.map +2 -2
- package/dist/esm/stories/text.stories.js +2 -2
- package/dist/esm/stories/text.stories.js.map +2 -2
- package/package.json +5 -4
- package/style.css +180 -70
- package/src/biz-components/BrandEquity/BrandEquity.tsx +0 -77
- package/src/biz-components/BrandEquity/index.ts +0 -1
- package/src/biz-components/Category/index.tsx +0 -57
- package/src/biz-components/Evaluate/index.tsx +0 -85
- package/src/biz-components/HeroBanner/HeroBanner.tsx +0 -103
- package/src/biz-components/HeroBanner/index.tsx +0 -1
- package/src/biz-components/HeroBanner/types.ts +0 -28
- package/src/biz-components/Marquee/index.tsx +0 -79
- package/src/biz-components/MemberEquity/index.tsx +0 -114
- package/src/biz-components/MemberEquity/types.ts +0 -26
- package/src/biz-components/Shelf/Shelf.tsx +0 -22
- package/src/biz-components/Shelf/index.ts +0 -1
- package/src/biz-components/Shelf/types.ts +0 -6
- package/src/biz-components/ShelfDisplay/index.tsx +0 -142
- package/src/biz-components/Slogan/index.tsx +0 -53
- package/src/biz-components/Slogan/types.ts +0 -25
- package/src/biz-components/index.ts +0 -11
- package/src/components/alert.tsx +0 -124
- package/src/components/avatar.tsx +0 -126
- package/src/components/badge.tsx +0 -27
- package/src/components/button.tsx +0 -183
- package/src/components/card.tsx +0 -51
- package/src/components/carousel.tsx +0 -352
- package/src/components/checkbox.tsx +0 -42
- package/src/components/color.tsx +0 -77
- package/src/components/container.tsx +0 -28
- package/src/components/dialog.tsx +0 -98
- package/src/components/drawer.tsx +0 -115
- package/src/components/drop-down.tsx +0 -182
- package/src/components/gird.tsx +0 -90
- package/src/components/heading.tsx +0 -80
- package/src/components/index.ts +0 -26
- package/src/components/input-number.tsx +0 -216
- package/src/components/input.tsx +0 -79
- package/src/components/link.tsx +0 -99
- package/src/components/picture.tsx +0 -100
- package/src/components/popover.tsx +0 -31
- package/src/components/radio.tsx +0 -85
- package/src/components/skeleton.tsx +0 -41
- package/src/components/tabs.tsx +0 -78
- package/src/components/text.tsx +0 -99
- package/src/components/theme.tsx +0 -20
- package/src/helpers/component-props.ts +0 -17
- package/src/helpers/constants.ts +0 -0
- package/src/helpers/index.ts +0 -2
- package/src/helpers/utils.ts +0 -16
- package/src/icons/spinner.tsx +0 -26
- package/src/index.ts +0 -1
- package/src/shared/Styles.tsx +0 -94
- package/src/stories/HeroBanner.stories.tsx +0 -86
- package/src/stories/MemberEquity.stories.tsx +0 -107
- package/src/stories/alert.stories.tsx +0 -41
- package/src/stories/avatar.stories.tsx +0 -83
- package/src/stories/badge.stories.tsx +0 -40
- package/src/stories/brandEquity.stories.tsx +0 -73
- package/src/stories/button.stories.tsx +0 -145
- package/src/stories/card.stories.tsx +0 -97
- package/src/stories/carousel.stories.tsx +0 -161
- package/src/stories/category.stories.tsx +0 -52
- package/src/stories/checkbox.stories.tsx +0 -93
- package/src/stories/container.stories.tsx +0 -97
- package/src/stories/dialog.stories.tsx +0 -74
- package/src/stories/drawer.stories.tsx +0 -88
- package/src/stories/drop-down.stories.tsx +0 -83
- package/src/stories/evaluate.stories.tsx +0 -53
- package/src/stories/grid.stories.tsx +0 -190
- package/src/stories/heading.stories.tsx +0 -96
- package/src/stories/input-number.stories.tsx +0 -52
- package/src/stories/input.stories.tsx +0 -64
- package/src/stories/link.stories.tsx +0 -142
- package/src/stories/marquee.stories.tsx +0 -102
- package/src/stories/picture.stories.tsx +0 -51
- package/src/stories/popover.stories.tsx +0 -41
- package/src/stories/radio.stories.tsx +0 -55
- package/src/stories/shelf.stories.tsx +0 -35
- package/src/stories/shelfDisplay.stories.tsx +0 -69
- package/src/stories/skeleton.stories.tsx +0 -67
- package/src/stories/slogan.stories.tsx +0 -99
- package/src/stories/tabs.stories.tsx +0 -179
- package/src/stories/text.stories.tsx +0 -130
- package/src/styles/global.css +0 -4
- package/src/styles/index.css +0 -0
- package/src/types/index.ts +0 -0
- package/src/types/props.ts +0 -5
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
type AccordionCardsType = {
|
|
2
|
+
products: Array<{
|
|
3
|
+
/** 标题文本 */
|
|
4
|
+
title: string;
|
|
5
|
+
/** 图片*/
|
|
6
|
+
img: string;
|
|
7
|
+
/** 内容节点 */
|
|
8
|
+
subTitle: string;
|
|
9
|
+
}>;
|
|
10
|
+
className?: string;
|
|
11
|
+
/** 按钮形状 */
|
|
12
|
+
shape?: 'round' | 'square';
|
|
13
|
+
/** 卡片形状 */
|
|
14
|
+
itemShape?: 'round' | 'square';
|
|
15
|
+
/** 主按钮配置 */
|
|
16
|
+
primaryButton?: string;
|
|
17
|
+
/** 按钮事件*/
|
|
18
|
+
event?: {
|
|
19
|
+
primaryButton?: {
|
|
20
|
+
onClick: (v: any) => void;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
declare const AccordionCards: ({ products, className, shape, itemShape, event, primaryButton, }: AccordionCardsType) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export default AccordionCards;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var C=Object.create;var f=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var j=(e,r)=>{for(var n in r)f(e,n,{get:r[n],enumerable:!0})},F=(e,r,n,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of T(r))!M.call(e,l)&&l!==n&&f(e,l,{get:()=>r[l],enumerable:!(c=L(r,l))||c.enumerable});return e};var w=(e,r,n)=>(n=e!=null?C(B(e)):{},F(r||!e||!e.__esModule?f(n,"default",{value:e,enumerable:!0}):n,e)),q=e=>F(f({},"__esModule",{value:!0}),e);var _={};j(_,{default:()=>R});module.exports=q(_);var s=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/utils.js"),p=w(require("../../components/picture.js")),g=w(require("../../components/button.js"));function z(){const[e,r]=(0,i.useState)(window?.innerWidth||0);return(0,i.useEffect)(()=>{const n=()=>r(window?.innerWidth||0);return window?.addEventListener("resize",n),()=>window?.removeEventListener("resize",n)},[]),e<=768}const A=({products:e=[],className:r="",shape:n="square",itemShape:c="square",event:l,primaryButton:y=""})=>{const E=z(),[k,v]=(0,i.useState)(null),[N,h]=(0,i.useState)({}),b=(0,i.useRef)([]),m=(0,i.useRef)({}),W=(o,t)=>{t&&(b.current[o]=t)},x=o=>{const t={...m.current,[o]:!0};h(t),m.current=t};return(0,i.useEffect)(()=>{const o=b.current;return o?.forEach((t,d)=>{t.addEventListener("transitionend",()=>x(d))}),()=>{o?.forEach((t,d)=>{t.removeEventListener("transitionend",()=>x(d))})}},[]),E?(0,s.jsx)("div",{className:(0,a.cn)("flex gap-4 overflow-x-auto w-full h-[400px]",r),children:e?.map((o,t)=>(0,s.jsx)("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:(0,s.jsx)(p.default,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img})},t))}):(0,s.jsx)("div",{className:(0,a.cn)("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",r),children:e?.map((o,t)=>{const d=k===t;return(0,s.jsxs)("div",{style:{flex:d?6:1,transition:"all 0.3s ease-in-out"},ref:u=>u&&W(t,u),className:(0,a.cn)("relative overflow-hidden cursor-pointer",c==="round"?"rounded-2xl":""),onMouseEnter:()=>v(t),onMouseLeave:()=>{v(null);const u={...m.current,[t]:!1};h(u),m.current=u},children:[(0,s.jsx)(p.default,{source:o?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),N?.[t]?(0,s.jsxs)("div",{className:(0,a.cn)("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",d?"opacity-100":"opacity-0"),children:[(0,s.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,s.jsx)("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:o?.title}),(0,s.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:o?.subTitle})]}),(0,s.jsx)(g.default,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>l?.primaryButton?.onClick?.(o),className:(0,a.cn)("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base",n==="round"?"rounded-2xl":""),children:y})]}):null]},t)})})};var R=A;
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useState, useEffect, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n const [width, setWidth] = useState(window?.innerWidth || 0)\n useEffect(() => {\n const onResize = () => setWidth(window?.innerWidth || 0)\n window?.addEventListener('resize', onResize)\n return () => window?.removeEventListener('resize', onResize)\n }, [])\n return width <= 768\n}\n\ntype AccordionCardsType = {\n products: Array<{\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n }>\n className?: string\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n products = [],\n className = '',\n shape = 'square',\n itemShape = 'square',\n event,\n primaryButton = '',\n}: AccordionCardsType) => {\n const isMobile = useWindowWidth()\n const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const refWidth = useRef<{ [key: number]: boolean }>({})\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n const current = { ...refWidth.current, [index]: true }\n setCurrentWidth(current)\n refWidth.current = current\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n // \u79FB\u52A8\u7AEF\n if (isMobile) {\n return (\n <div className={cn('flex gap-4 overflow-x-auto w-full h-[400px]', className)}>\n {products?.map((item, idx) => (\n <div key={idx} className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\">\n <Picture className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n </div>\n ))}\n </div>\n )\n }\n\n // \u684C\u9762\u7AEF\n return (\n <div className={cn('h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]', className)}>\n {products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 6 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n transition: 'all 0.3s ease-in-out',\n }}\n ref={el => el && getRef(idx, el)}\n className={cn('relative overflow-hidden cursor-pointer', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => setHoverIndex(idx)}\n onMouseLeave={() => {\n setHoverIndex(null)\n const current = { ...refWidth.current, [idx]: false }\n setCurrentWidth(current)\n refWidth.current = current\n }}\n >\n <Picture source={item?.img} className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n {currentWidth?.[idx] ? (\n <div\n className={cn(\n 'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n 'transition-all duration-[50ms] delay-[300ms]',\n isExpanded ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">\n {item?.title}\n </p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(item)}\n className={cn(\n 'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base',\n shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n )\n}\n\nexport default AccordionCards\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqFY,IAAAI,EAAA,6BArFZC,EAA4C,iBAC5CC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCAGnB,SAASC,GAAiB,CACxB,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAAS,QAAQ,YAAc,CAAC,EAC1D,sBAAU,IAAM,CACd,MAAMC,EAAW,IAAMD,EAAS,QAAQ,YAAc,CAAC,EACvD,eAAQ,iBAAiB,SAAUC,CAAQ,EACpC,IAAM,QAAQ,oBAAoB,SAAUA,CAAQ,CAC7D,EAAG,CAAC,CAAC,EACEF,GAAS,GAClB,CA0BA,MAAMG,EAAiB,CAAC,CACtB,SAAAC,EAAW,CAAC,EACZ,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,UAAAC,EAAY,SACZ,MAAAC,EACA,cAAAC,EAAgB,EAClB,IAA0B,CACxB,MAAMC,EAAWX,EAAe,EAC1B,CAACY,EAAYC,CAAa,KAAI,YAAwB,IAAI,EAC1D,CAACC,EAAcC,CAAe,KAAI,YAAqC,CAAC,CAAC,EAEzEC,KAAe,UAAyB,CAAC,CAAC,EAC1CC,KAAW,UAAmC,CAAC,CAAC,EAEhDC,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFJ,EAAa,QAAQG,CAAK,EAAIC,EAElC,EAEMC,EAAuBF,GAAkB,CAC7C,MAAMG,EAAU,CAAE,GAAGL,EAAS,QAAS,CAACE,CAAK,EAAG,EAAK,EACrDJ,EAAgBO,CAAO,EACvBL,EAAS,QAAUK,CACrB,EAeA,SAbA,aAAU,IAAM,CACd,MAAMC,EAAUP,EAAa,QAC7B,OAAAO,GAAS,QAAQ,CAACC,EAAML,IAAU,CAChCK,EAAK,iBAAiB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CACzE,CAAC,EACM,IAAM,CACXI,GAAS,QAAQ,CAACC,EAAML,IAAU,CAChCK,EAAK,oBAAoB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CAC5E,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGDR,KAEA,OAAC,OAAI,aAAW,MAAG,8CAA+CL,CAAS,EACxE,SAAAD,GAAU,IAAI,CAACmB,EAAMC,OACpB,OAAC,OAAc,UAAU,kFACvB,mBAAC,EAAAC,QAAA,CAAQ,UAAU,iEAAiE,OAAQF,GAAM,IAAK,GAD/FC,CAEV,CACD,EACH,KAMF,OAAC,OAAI,aAAW,MAAG,iFAAkFnB,CAAS,EAC3G,SAAAD,GAAU,IAAI,CAACmB,EAAMC,IAAQ,CAC5B,MAAME,EAAaf,IAAea,EAElC,SACE,QAAC,OAEC,MAAO,CACL,KALYE,EAAa,EAAI,EAM7B,WAAY,sBACd,EACA,IAAKP,GAAMA,GAAMF,EAAOO,EAAKL,CAAE,EAC/B,aAAW,MAAG,0CAA2CZ,IAAc,QAAU,cAAgB,EAAE,EACnG,aAAc,IAAMK,EAAcY,CAAG,EACrC,aAAc,IAAM,CAClBZ,EAAc,IAAI,EAClB,MAAMS,EAAU,CAAE,GAAGL,EAAS,QAAS,CAACQ,CAAG,EAAG,EAAM,EACpDV,EAAgBO,CAAO,EACvBL,EAAS,QAAUK,CACrB,EAEA,oBAAC,EAAAI,QAAA,CAAQ,OAAQF,GAAM,IAAK,UAAU,iEAAiE,EACtGV,IAAeW,CAAG,KACjB,QAAC,OACC,aAAW,MACT,4FACA,+CACAE,EAAa,cAAgB,WAC/B,EAEA,qBAAC,OAAI,UAAU,8BACb,oBAAC,KAAE,UAAU,4EACV,SAAAH,GAAM,MACT,KACA,OAAC,MAAG,UAAU,qDAAsD,SAAAA,GAAM,SAAS,GACrF,KACA,OAAC,EAAAI,QAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,QAAS,IAAMnB,GAAO,eAAe,UAAUe,CAAI,EACnD,aAAW,MACT,2FACAjB,IAAU,QAAU,cAAgB,EACtC,EAEC,SAAAG,EACH,GACF,EACE,OA3CCe,CA4CP,CAEJ,CAAC,EACH,CAEJ,EAEA,IAAOhC,EAAQW",
|
|
6
|
+
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_button", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "Picture", "isExpanded", "Button"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var g=Object.create;var
|
|
1
|
+
"use strict";var g=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var s in t)i(e,s,{get:t[s],enumerable:!0})},n=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!b.call(e,o)&&o!==s&&i(e,o,{get:()=>t[o],enumerable:!(r=u(t,o))||r.enumerable});return e};var N=(e,t,s)=>(s=e!=null?g(v(e)):{},n(t||!e||!e.__esModule?i(s,"default",{value:e,enumerable:!0}):s,e)),h=e=>n(i({},"__esModule",{value:!0}),e);var w={};y(w,{default:()=>q});module.exports=h(w);var a=require("react/jsx-runtime"),D=require("react"),p=require("../../helpers/utils.js"),d=N(require("../../components/picture.js")),c=require("../../shared/Styles.js");const k=({items:e=[],itemShape:t="square",style:s="",className:r=""})=>(0,a.jsx)("div",{className:(0,p.cn)("brand-equity-wrapper w-full bg-[#F7F8F9]",r),children:(0,a.jsx)("div",{className:(0,p.cn)("grid gap-3 px-4","grid-cols-1 tablet:px-8 tablet:grid-cols-2","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:e.map((o,l)=>(0,a.jsxs)("div",{className:(0,p.cn)("brand-equity-item","bg-white p-4 flex flex-col","desktop:p-6","gap-12 desktop:gap-16","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(l)},t==="round"?"rounded-[16px]":"rounded-none"),children:[(0,a.jsxs)("div",{className:"flex justify-between items-center gap-3",children:[(0,a.jsx)("h3",{className:"text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg",children:o.title}),o.avatarList?.length?(0,a.jsx)("div",{className:"flex -space-x-2",children:o.avatarList.map((m,x)=>(0,a.jsx)("div",{className:(0,p.cn)("size-[30px] rounded-full border-2 border-white overflow-hidden","relative inline-block","lg-desktop:size-[36px]"),children:(0,a.jsx)(d.default,{source:m,className:"w-full h-full object-cover"})},x))}):(0,a.jsx)("span",{className:"text-[#1D1D1F]",children:o.icon})]}),(0,a.jsx)("p",{className:"font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl",children:o.description})]},l))})});var q=(0,c.withStyles)(k);
|
|
2
2
|
//# sourceMappingURL=BrandEquity.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full', className)}>\n <div\n className={cn(\n 'grid gap-3 px-4',\n 'grid-cols-1
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n items: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n <div\n className={cn(\n 'grid gap-3 px-4',\n 'grid-cols-1 tablet:px-8 tablet:grid-cols-2',\n 'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n 'desktop:px-[175px] lg-desktop:px-[268px]'\n )}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'bg-white p-4 flex flex-col',\n 'desktop:p-6',\n 'gap-12 desktop:gap-16',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"flex justify-between items-center gap-3\">\n <h3 className=\"text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg\">\n {item.title}\n </h3>\n {item.avatarList?.length ? (\n <div className=\"flex -space-x-2\">\n {item.avatarList.map((avatarUrl: string, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] rounded-full border-2 border-white overflow-hidden',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={avatarUrl} className=\"w-full h-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n )}\n </div>\n <p className=\"font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+CY,IAAAI,EAAA,6BA/CZC,EAAkB,iBAElBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAA2B,kCAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,MAAAC,EAAQ,GAAI,UAAAC,EAAY,EAAG,OAE5G,OAAC,OAAI,aAAW,MAAG,2CAA4CA,CAAS,EACtE,mBAAC,OACC,aAAW,MACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAH,EAAM,IAAI,CAACI,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASA,CAAK,CACrD,EACAJ,IAAc,QAAU,iBAAmB,cAC7C,EAEA,qBAAC,OAAI,UAAU,0CACb,oBAAC,MAAG,UAAU,oFACX,SAAAG,EAAK,MACR,EACCA,EAAK,YAAY,UAChB,OAAC,OAAI,UAAU,kBACZ,SAAAA,EAAK,WAAW,IAAI,CAACE,EAAmBD,OACvC,OAAC,OAEC,aAAW,MACT,iEACA,wBACA,wBACF,EAEA,mBAAC,EAAAE,QAAA,CAAQ,OAAQD,EAAW,UAAU,6BAA6B,GAP9DD,CAQP,CACD,EACH,KAEA,OAAC,QAAK,UAAU,iBAAkB,SAAAD,EAAK,KAAK,GAEhD,KACA,OAAC,KAAE,UAAU,iFACV,SAAAA,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOb,KAAQ,cAAWO,CAAW",
|
|
6
6
|
"names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "BrandEquity", "items", "itemShape", "style", "className", "item", "index", "avatarUrl", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var m=Object.create;var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var r in o)s(e,r,{get:o[r],enumerable:!0})},d=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of x(o))!f.call(e,a)&&a!==r&&s(e,a,{get:()=>o[a],enumerable:!(p=n(o,a))||p.enumerable});return e};var u=(e,o,r)=>(r=e!=null?m(c(e)):{},d(o||!e||!e.__esModule?s(r,"default",{value:e,enumerable:!0}):r,e)),v=e=>d(s({},"__esModule",{value:!0}),e);var C={};g(C,{default:()=>y});module.exports=v(C);var t=require("react/jsx-runtime"),h=require("react"),l=require("../../helpers/utils.js"),i=u(require("../../components/picture.js"));const w=({className:e="",shape:o="square",products:r=[]})=>(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("div",{className:(0,l.cn)("w-full",e),children:(0,t.jsx)("div",{className:(0,l.cn)("flex overflow-hidden"),children:(0,t.jsx)("div",{className:(0,l.cn)("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:r?.map((p,a)=>(0,t.jsxs)("div",{className:(0,l.cn)("bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden","laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8",o==="round"?"rounded-[16px]":"rounded-none"),children:[(0,t.jsx)(i.default,{className:"w-full object-cover",source:p?.img}),(0,t.jsx)("p",{className:"flex-1 text-sm text-center font-semibold desktop:text-lg",children:p?.title})]},a))})})})});var y=w;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n}\n\nexport interface CategoryProps {\n products: CategoryItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden'
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBI,IAAAI,EAAA,6BAzBJC,EAAkB,iBAClBC,EAAmB
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n}\n\nexport interface CategoryProps {\n products: CategoryItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden')}>\n <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n {products?.map((item, index) => {\n return (\n <div\n key={index}\n className={cn(\n 'bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden',\n 'laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8',\n shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <Picture\n className=\"w-full object-cover\"\n source={item?.img}\n />\n <p className=\"flex-1 text-sm text-center font-semibold desktop:text-lg\">\n {item?.title}\n </p>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default Category\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyBI,IAAAI,EAAA,6BAzBJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CAiBpB,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,OAEI,mBACE,mBAAC,OAAI,aAAW,MAAG,SAAUF,CAAS,EACpC,mBAAC,OAAI,aAAW,MAAG,sBAAsB,EACvC,mBAAC,OAAI,aAAW,MAAG,cAAe,sDAAsD,EACrF,SAAAE,GAAU,IAAI,CAACC,EAAMC,OAElB,QAAC,OAEC,aAAW,MACT,wFACA,+GACAH,IAAU,QAAU,iBAAmB,cACzC,EAEA,oBAAC,EAAAI,QAAA,CACC,UAAU,sBACV,OAAQF,GAAM,IAChB,KACA,OAAC,KAAE,UAAU,2DACV,SAAAA,GAAM,MACT,IAbKC,CAcP,CAEH,EACH,EACF,EACF,EACF,EAIJ,IAAOX,EAAQM",
|
|
6
6
|
"names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "Category", "className", "shape", "products", "item", "index", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(t,l)=>{for(var s in l)d(t,s,{get:l[s],enumerable:!0})},p=(t,l,s,i)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of x(l))!w.call(t,a)&&a!==s&&d(t,a,{get:()=>l[a],enumerable:!(i=f(l,a))||i.enumerable});return t};var b=(t,l,s)=>(s=t!=null?c(u(t)):{},p(l||!t||!t.__esModule?d(s,"default",{value:t,enumerable:!0}):s,t)),N=t=>p(d({},"__esModule",{value:!0}),t);var C={};g(C,{default:()=>k});module.exports=N(C);var e=require("react/jsx-runtime"),E=require("react"),r=require("../../helpers/utils.js"),n=b(require("../../components/picture.js")),o=require("../../components/avatar.js");const h=({className:t="",shape:l="square",products:s=[]})=>{const i=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:(0,r.cn)("w-full",t),children:(0,e.jsx)("div",{className:(0,r.cn)("flex overflow-hidden"),children:(0,e.jsx)("div",{className:(0,r.cn)("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:s?.map((a,m)=>(0,e.jsxs)("div",{className:(0,r.cn)("bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",l==="round"?"rounded-2xl":"rounded-none"),children:[(0,e.jsxs)("div",{className:(0,r.cn)("mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16"),children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("h4",{className:"text-sm font-semibold laptop:text-lg",children:a?.title}),(0,e.jsx)("div",{className:"mt-1 flex items-center",children:i(a?.rating)?.map?.((L,v)=>(0,e.jsx)("div",{className:"mr-1",children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},v))})]}),(0,e.jsx)("div",{className:"size-10 overflow-hidden desktop:size-12",children:(0,e.jsxs)(o.Avatar,{className:"w-full h-full",children:[(0,e.jsx)(o.AvatarImage,{src:a?.avatar}),(0,e.jsx)(o.AvatarFallback,{children:a?.title})]})})]}),(0,e.jsx)("p",{className:"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl",children:a?.description||""}),(0,e.jsxs)("div",{className:(0,r.cn)("mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden",l==="round"?"rounded-[8px]":"rounded-none"),children:[(0,e.jsx)("div",{className:"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20",children:(0,e.jsx)(n.default,{className:"w-full object-cover",source:a?.img})}),(0,e.jsx)("p",{className:"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg",children:a?.subTitle||""})]})]},m))})})})})};var k=h;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils'\nimport Picture from '../../components/picture'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n}\n\nexport interface EvaluateProps {\n products: EvaluateItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden'
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_avatar", "Evaluate", "className", "shape", "products", "item", "index", "Picture"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n rating: number\n}\n\nexport interface EvaluateProps {\n products: EvaluateItem[]\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({\n className = '',\n shape = 'square',\n products = [],\n}) => {\n\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <>\n <div className={cn('w-full', className)}>\n <div className={cn('flex overflow-hidden')}>\n <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n {products?.map((item, index) => {\n return (\n <div\n key={index}\n className={cn(\n 'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden',\n 'laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6',\n shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16')}>\n <div className=\"flex-1\">\n <h4 className=\"text-sm font-semibold laptop:text-lg\">{item?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {\n handleRating(item?.rating)?.map?.((_, index) => {\n return <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n })\n }\n </div>\n </div>\n <div className=\"size-10 overflow-hidden desktop:size-12\">\n <Avatar className=\"w-full h-full\">\n <AvatarImage src={item?.avatar} />\n <AvatarFallback>{item?.title}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n <p className=\"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl\">\n {item?.description || ''}\n </p>\n <div className={cn('mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden', shape === 'round' ? 'rounded-[8px]' : 'rounded-none')}>\n <div className=\"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20\">\n <Picture\n className=\"w-full object-cover\"\n source={item?.img}\n />\n </div>\n <p className=\"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg\">\n {item?.subTitle || ''}\n </p>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n </>\n )\n}\n\nexport default Evaluate\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCI,IAAAI,EAAA,6BAtCJC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAoD,sCAqBpD,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,IAAM,CAEJ,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,SACE,mBACE,mBAAC,OAAI,aAAW,MAAG,SAAUJ,CAAS,EACpC,mBAAC,OAAI,aAAW,MAAG,sBAAsB,EACvC,mBAAC,OAAI,aAAW,MAAG,cAAe,sDAAsD,EACrF,SAAAE,GAAU,IAAI,CAACG,EAAMC,OAElB,QAAC,OAEC,aAAW,MACT,wFACA,+HACAL,IAAU,QAAU,cAAgB,cACtC,EAEA,qBAAC,OAAI,aAAW,MAAG,6DAA6D,EAC9E,qBAAC,OAAI,UAAU,SACb,oBAAC,MAAG,UAAU,uCAAwC,SAAAI,GAAM,MAAM,KAClE,OAAC,OAAI,UAAU,yBAEb,SAAAF,EAAaE,GAAM,MAAM,GAAG,MAAM,CAACE,EAAGD,OAC7B,OAAC,OAAgB,UAAU,OAChC,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANeA,CAOjB,CACD,EAEH,GACF,KACA,OAAC,OAAI,UAAU,0CACb,oBAAC,UAAO,UAAU,gBAChB,oBAAC,eAAY,IAAKD,GAAM,OAAQ,KAChC,OAAC,kBAAgB,SAAAA,GAAM,MAAM,GAC/B,EACF,GACF,KACA,OAAC,KAAE,UAAU,wEACV,SAAAA,GAAM,aAAe,GACxB,KACA,QAAC,OAAI,aAAW,MAAG,2DAA4DJ,IAAU,QAAU,gBAAkB,cAAc,EACjI,oBAAC,OAAI,UAAU,gEACb,mBAAC,EAAAO,QAAA,CACC,UAAU,sBACV,OAAQH,GAAM,IAChB,EACF,KACA,OAAC,KAAE,UAAU,4DACV,SAAAA,GAAM,UAAY,GACrB,GACF,IA7CKC,CA8CP,CAEH,EACH,EACF,EACF,EACF,CAEJ,EAEA,IAAOd,EAAQO",
|
|
6
|
+
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_avatar", "Evaluate", "className", "shape", "products", "handleRating", "num", "item", "index", "_", "Picture"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface GraphicProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
items: {
|
|
5
|
+
imgUrl: string;
|
|
6
|
+
title: string;
|
|
7
|
+
textColor?: string;
|
|
8
|
+
}[];
|
|
9
|
+
shape?: 'round' | 'square';
|
|
10
|
+
}
|
|
11
|
+
declare const _default: {
|
|
12
|
+
(props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var b=Object.create;var x=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)x(t,s,{get:e[s],enumerable:!0})},f=(t,e,s,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of k(e))!N.call(t,a)&&a!==s&&x(t,a,{get:()=>e[a],enumerable:!(m=C(e,a))||m.enumerable});return t};var G=(t,e,s)=>(s=t!=null?b(y(t)):{},f(e||!t||!t.__esModule?x(s,"default",{value:t,enumerable:!0}):s,t)),P=t=>f(x({},"__esModule",{value:!0}),t);var w={};v(w,{default:()=>S});module.exports=P(w);var l=require("react/jsx-runtime"),n=G(require("react")),c=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),r=require("../../components/index.js"),d=require("../../components/index.js");const u=n.default.forwardRef(({items:t,shape:e,className:s,...m},a)=>{const i=t?.length||0,h=(0,n.useMemo)(()=>{const p="basis-[296px]";let o="";return i===1&&(o="basis-[100%]"),i===2&&(o="tablet:basis-1/2"),i===3&&(o="laptop:basis-1/3"),i>3&&(o="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${p} ${o}`},[i]);return(0,l.jsx)(r.Carousel,{ref:a,opts:{align:"start"},className:(0,c.cn)("px-4 tablet:px-8 laptop:px-16",s),...m,children:(0,l.jsx)(n.default.Fragment,{children:(0,l.jsx)(r.CarouselContent,{children:t.map((p,o)=>(0,l.jsx)(r.CarouselItem,{className:(0,c.cn)("pl-3 laptop:pl-4 flex-shrink-0 h-[360px]",h),children:(0,l.jsxs)("div",{className:(0,c.cn)("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":e==="round"}),children:[(0,l.jsx)(d.Picture,{className:"h-full ",imgClassName:"h-full object-cover",source:p?.imgUrl}),(0,l.jsx)("div",{className:"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]",children:(0,l.jsx)(d.Text,{html:p?.title,style:{color:p?.textColor},className:"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2"})})]})},o+p?.title))})},".0")})});u.displayName="Graphic";var S=(0,g.withStyles)(u);
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport interface GraphicProps {\n className?: string\n items: {\n imgUrl: string\n title: string\n textColor?: string\n }[]\n shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n const itemsLength = items?.length || 0\n\n const itemStyle = useMemo(() => {\n const basisStyle = 'basis-[296px]'\n let breakPointStyle = ''\n if (itemsLength === 1) {\n breakPointStyle = 'basis-[100%]'\n }\n if (itemsLength === 2) {\n breakPointStyle = 'tablet:basis-1/2'\n }\n if (itemsLength === 3) {\n breakPointStyle = 'laptop:basis-1/3'\n }\n if (itemsLength > 3) {\n breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n }\n return `${basisStyle} ${breakPointStyle}`\n }, [itemsLength])\n\n return (\n <Carousel\n ref={ref}\n opts={{\n align: 'start',\n }}\n className={cn('px-4 tablet:px-8 laptop:px-16', className)}\n {...props}\n >\n <React.Fragment key=\".0\">\n <CarouselContent>\n {items.map((item, index) => (\n <CarouselItem\n key={index + item?.title}\n className={cn('pl-3 laptop:pl-4 flex-shrink-0 h-[360px]', itemStyle)}\n >\n <div className={cn(\"relative h-full\", {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round'\n })}>\n <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n <div className=\"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]\">\n <Text\n html={item?.title}\n style={{\n color: item?.textColor,\n }}\n className=\"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2\"\n />\n </div>\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </React.Fragment>\n </Carousel>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDc,IAAAI,EAAA,6BArDdC,EAA+B,oBAC/BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwD,qCACxDA,EAA8B,qCAY9B,MAAMC,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,KAAY,WAAQ,IAAM,CAC9B,MAAMC,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,SACE,OAAC,YACC,IAAKD,EACL,KAAM,CACJ,MAAO,OACT,EACA,aAAW,MAAG,gCAAiCF,CAAS,EACvD,GAAGC,EAEJ,mBAAC,EAAAJ,QAAM,SAAN,CACC,mBAAC,mBACE,SAAAC,EAAM,IAAI,CAACS,EAAMC,OAChB,OAAC,gBAEC,aAAW,MAAG,2CAA4CJ,CAAS,EAEnE,oBAAC,OAAI,aAAW,MAAG,kBAAmB,CACnC,gDAAkDL,IAAU,OAC/D,CAAC,EACC,oBAAC,WAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQQ,GAAM,OAAQ,KACtF,OAAC,OAAI,UAAU,kEACb,mBAAC,QACC,KAAMA,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBKC,EAAQD,GAAM,KAiBrB,CACD,EACH,GAvBkB,IAwBpB,EACF,CAEJ,CAAC,EAEDX,EAAQ,YAAc,UAEtB,IAAOP,KAAQ,cAAWO,CAAO",
|
|
6
|
+
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "Graphic", "React", "items", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var w=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var H=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},g=(e,a,r,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of y(a))!F.call(e,n)&&n!==r&&m(e,n,{get:()=>a[n],enumerable:!(l=u(a,n))||l.enumerable});return e};var z=(e,a,r)=>(r=e!=null?w(D(e)):{},g(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),C=e=>g(m({},"__esModule",{value:!0}),e);var R={};H(R,{default:()=>B});module.exports=C(R);var t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var w=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var H=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},g=(e,a,r,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of y(a))!F.call(e,n)&&n!==r&&m(e,n,{get:()=>a[n],enumerable:!(l=u(a,n))||l.enumerable});return e};var z=(e,a,r)=>(r=e!=null?w(D(e)):{},g(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),C=e=>g(m({},"__esModule",{value:!0}),e);var R={};H(R,{default:()=>B});module.exports=C(R);var t=require("react/jsx-runtime"),p=z(require("react")),s=require("../../components/index.js"),i=require("../../helpers/index.js"),f=require("../../shared/Styles.js");const b=p.default.forwardRef(({title:e,subtitle:a,background:r,primaryButton:l,secondaryButton:n,theme:o="light",className:v,products:c=[]},h)=>{const x=o==="dark"?"text-white":"text-[#1D1D1F]",N=o==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{ref:h,className:(0,i.cn)("relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat",v),style:{backgroundImage:`url(${r})`},children:[(0,t.jsxs)("div",{className:"relative z-10 flex flex-col gap-8 px-32 pt-[307px]",children:[(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)("h1",{className:(0,i.cn)("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",x),children:e}),(0,t.jsx)("p",{className:(0,i.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",x),children:a})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[n&&(0,t.jsx)(s.Button,{size:"lg",variant:"primary",theme:o,className:"hero-banner-primary-button",...n,children:n.text}),l&&(0,t.jsx)(s.Button,{size:"lg",variant:"secondary",theme:o,...l,className:"hero-banner-secondary-button bg-transparent border-black text-black hover:bg-black hover:text-white",children:l.text})]})]}),c.length>0&&(0,t.jsx)("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:c.map((k,d)=>(0,t.jsxs)(p.default.Fragment,{children:[(0,t.jsx)(s.Text,{className:(0,i.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",o==="dark"?"text-white":"text-[#1D1D1F]"),children:k.title}),d<c.length-1&&(0,t.jsx)("div",{className:(0,i.cn)("h-4 w-px",N)})]},d))})]})});b.displayName="HeroBanner";var B=(0,f.withStyles)(b);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\"\nimport type { HeroBannerProps } from \"./types.js\"\nimport { Button, Text } from \"../../components/index.js\"\nimport { cn } from \"../../helpers/index.js\"\nimport { withStyles } from \"../../shared/Styles.js\"\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ \n title, \n subtitle, \n background,\n primaryButton,\n secondaryButton,\n theme = \"light\",\n className,\n products = [] \n }, ref) => {\n const textColorClass = theme === \"dark\" ? \"text-white\" : \"text-[#1D1D1F]\"\n const dividerColorClass = theme === \"dark\" ? \"bg-white\" : \"bg-[#1D1D1F]\"\n\n return (\n <div \n ref={ref} \n className={cn(\n \"relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat\",\n className\n )}\n style={{ backgroundImage: `url(${background})` }}\n >\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32 pt-[307px]\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1 className={cn(\n \"hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]\",\n textColorClass\n )}>\n {title}\n </h1>\n <p className={cn(\n \"hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]\",\n textColorClass\n )}>\n {subtitle}\n </p>\n </div>\n \n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button\n size=\"lg\"\n variant=\"
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+BU,IAAAI,EAAA,6BA/BVC,EAAkB,oBAElBC,EAA6B,qCAC7BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WACvB,CAAC,CACC,MAAAC,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EAAW,CAAC,CACd,EAAGC,IAAQ,CACT,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,IAAKG,EACL,aAAW,MACT,8GACAF,CACF,EACA,MAAO,CAAE,gBAAiB,OAAOJ,CAAU,GAAI,EAG/C,qBAAC,OAAI,UAAU,qDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,MAAG,aAAW,MACb,oFACAO,CACF,EACG,SAAAT,EACH,KACA,OAAC,KAAE,aAAW,MACZ,4EACAS,CACF,EACG,SAAAR,EACH,GACF,KAGA,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UACC,KAAK,KACL,QAAQ,
|
|
4
|
+
"sourcesContent": ["import React from \"react\"\nimport type { HeroBannerProps } from \"./types.js\"\nimport { Button, Text } from \"../../components/index.js\"\nimport { cn } from \"../../helpers/index.js\"\nimport { withStyles } from \"../../shared/Styles.js\"\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ \n title, \n subtitle, \n background,\n primaryButton,\n secondaryButton,\n theme = \"light\",\n className,\n products = [] \n }, ref) => {\n const textColorClass = theme === \"dark\" ? \"text-white\" : \"text-[#1D1D1F]\"\n const dividerColorClass = theme === \"dark\" ? \"bg-white\" : \"bg-[#1D1D1F]\"\n\n return (\n <div \n ref={ref} \n className={cn(\n \"relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat\",\n className\n )}\n style={{ backgroundImage: `url(${background})` }}\n >\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32 pt-[307px]\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1 className={cn(\n \"hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]\",\n textColorClass\n )}>\n {title}\n </h1>\n <p className={cn(\n \"hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]\",\n textColorClass\n )}>\n {subtitle}\n </p>\n </div>\n \n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n theme={theme}\n className=\"hero-banner-primary-button\"\n {...secondaryButton}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n theme={theme}\n {...primaryButton}\n className=\"hero-banner-secondary-button bg-transparent border-black text-black hover:bg-black hover:text-white\"\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n \"hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]\",\n theme === \"dark\" ? \"text-white\" : \"text-[#1D1D1F]\"\n )}\n >\n {product.title}\n </Text>\n {index < products.length - 1 && (\n <div className={cn(\"h-4 w-px\", dividerColorClass)} />\n )}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nHeroBanner.displayName = \"HeroBanner\"\n\nexport default withStyles(HeroBanner)\n\n\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+BU,IAAAI,EAAA,6BA/BVC,EAAkB,oBAElBC,EAA6B,qCAC7BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WACvB,CAAC,CACC,MAAAC,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EAAW,CAAC,CACd,EAAGC,IAAQ,CACT,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,IAAKG,EACL,aAAW,MACT,8GACAF,CACF,EACA,MAAO,CAAE,gBAAiB,OAAOJ,CAAU,GAAI,EAG/C,qBAAC,OAAI,UAAU,qDACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,MAAG,aAAW,MACb,oFACAO,CACF,EACG,SAAAT,EACH,KACA,OAAC,KAAE,aAAW,MACZ,4EACAS,CACF,EACG,SAAAR,EACH,GACF,KAGA,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UACC,KAAK,KACL,QAAQ,UACR,MAAOC,EACP,UAAU,6BACT,GAAGD,EAEH,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UACC,KAAK,KACL,QAAQ,YACR,MAAOE,EACN,GAAGF,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,mDACZ,SAAAA,EAAS,IAAI,CAACI,EAASC,OACtB,QAAC,EAAAb,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAM,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,MACzB,OAAC,OAAI,aAAW,MAAG,WAAYG,CAAiB,EAAG,IAVlCE,CAYrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAd,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ButtonProps } from \"../../components/button\"\n\nexport interface HeroBannerProps {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u80CC\u666F\u56FE\u7247URL */\n background: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: \"light\" | \"dark\"\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n products?: Array<{\n title: string\n active?: boolean\n }>\n}\n "],
|
|
4
|
+
"sourcesContent": ["import type { ButtonProps } from \"../../components/button.js\"\n\nexport interface HeroBannerProps {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n /** \u80CC\u666F\u56FE\u7247URL */\n background: string\n /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n primaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n secondaryButton?: {\n text: string\n } & Omit<ButtonProps, 'children'>\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: \"light\" | \"dark\"\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n products?: Array<{\n title: string\n active?: boolean\n }>\n}\n "],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var g=Object.create;var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},
|
|
1
|
+
"use strict";var g=Object.create;var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},q=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of P(t))!C.call(e,a)&&a!==r&&n(e,a,{get:()=>t[a],enumerable:!(o=x(t,a))||o.enumerable});return e};var f=(e,t,r)=>(r=e!=null?g(N(e)):{},q(t||!e||!e.__esModule?n(r,"default",{value:e,enumerable:!0}):r,e)),L=e=>q(n({},"__esModule",{value:!0}),e);var v={};T(v,{Marquee:()=>u,MarqueeImageContent:()=>M,MarqueeList:()=>c,MarqueeTextContent:()=>l});module.exports=L(v);var s=require("react/jsx-runtime"),p=f(require("react")),d=f(require("react-fast-marquee")),y=require("react-fast-marquee"),m=require("../../components/index.js"),i=require("../../helpers/utils.js");const u=p.default.forwardRef(({children:e,...t},r)=>(0,s.jsx)(d.default,{ref:r,...t,children:e}));u.displayName="Marquee";const c=p.default.forwardRef(({className:e,children:t,...r},o)=>(0,s.jsx)("div",{className:(0,i.cn)("flex gap-6 items-center laptop:gap-16",e),ref:o,children:t}));c.displayName="MarqueeList";const M=({image:e,className:t})=>(0,s.jsx)(m.Picture,{source:e,className:(0,i.cn)("aspect-w-[120] w-[72px] aspect-h-[80] laptop:w-[120px]",t),imgClassName:"object-cover"});M.displayName="MarqueeImageContent";const l=p.default.forwardRef(({text:e,className:t},r)=>(0,s.jsx)(m.Text,{as:"div",ref:r,html:e,className:(0,i.cn)("size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium",t)}));l.displayName="MarqueeTextContent";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Marquee/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport {
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,wBAAAC,EAAA,gBAAAC,EAAA,uBAAAC,IAAA,eAAAC,EAAAN,GASM,IAAAO,EAAA,6BATNC,EAAkB,oBAClBC,
|
|
6
|
-
"names": ["Marquee_exports", "__export", "Marquee", "MarqueeImageContent", "MarqueeList", "MarqueeTextContent", "__toCommonJS", "import_jsx_runtime", "import_react", "
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { default as FastMarquee } from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst Marquee = React.forwardRef<HTMLDivElement, FastMarqueeProps>(\n ({children, ...props}, ref) => {\n return (\n <FastMarquee\n ref={ref}\n {...props}\n >\n {children}\n </FastMarquee>\n )\n }\n)\n\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n children?: React.ReactNode;\n className?: string;\n}\n\nconst MarqueeList = React.forwardRef<\nHTMLDivElement,\nMarqueeListProps\n>(({ className, children, ...props }, ref) => {\n return (\n <div className={cn(\"flex gap-6 items-center laptop:gap-16\", className)} ref={ref}>\n {children}\n </div>\n )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n image: string\n className?: string;\n}\n\nconst MarqueeImageContent = ({ image, className }: MarqueeImageContentProps) => {\n return (\n <Picture \n source={image}\n className={cn(\"aspect-w-[120] w-[72px] aspect-h-[80] laptop:w-[120px]\", className)}\n imgClassName=\"object-cover\"\n />\n )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n text: string\n className?: string;\n}\n\nconst MarqueeTextContent = React.forwardRef<\nHTMLDivElement,\nMarqueeTextContentProps\n>(({ text, className }, ref) => {\n return (\n <Text\n as=\"div\"\n ref={ref}\n html={text}\n className={cn(\"size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium\", className)}\n />\n )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,wBAAAC,EAAA,gBAAAC,EAAA,uBAAAC,IAAA,eAAAC,EAAAN,GASM,IAAAO,EAAA,6BATNC,EAAkB,oBAClBC,EAAuC,iCACvCA,EAAsD,8BACtDC,EAA8B,qCAC9BC,EAAmB,kCAEnB,MAAMT,EAAU,EAAAU,QAAM,WACpB,CAAC,CAAC,SAAAC,EAAU,GAAGC,CAAK,EAAGC,OAEnB,OAAC,EAAAC,QAAA,CACC,IAAKD,EACJ,GAAGD,EAEH,SAAAD,EACH,CAGN,EAEAX,EAAQ,YAAc,UAOtB,MAAME,EAAc,EAAAQ,QAAM,WAGxB,CAAC,CAAE,UAAAK,EAAW,SAAAJ,EAAU,GAAGC,CAAM,EAAGC,OAElC,OAAC,OAAI,aAAW,MAAG,wCAAyCE,CAAS,EAAG,IAAKF,EAC1E,SAAAF,EACH,CAEH,EAEDT,EAAY,YAAc,cAO1B,MAAMD,EAAsB,CAAC,CAAE,MAAAe,EAAO,UAAAD,CAAU,OAE5C,OAAC,WACC,OAAQC,EACR,aAAW,MAAG,yDAA0DD,CAAS,EACjF,aAAa,eACf,EAIJd,EAAoB,YAAc,sBAOlC,MAAME,EAAqB,EAAAO,QAAM,WAG/B,CAAC,CAAE,KAAAO,EAAM,UAAAF,CAAU,EAAGF,OAEpB,OAAC,QACC,GAAG,MACH,IAAKA,EACL,KAAMI,EACN,aAAW,MAAG,8FAA+FF,CAAS,EACxH,CAEH,EAEDZ,EAAmB,YAAc",
|
|
6
|
+
"names": ["Marquee_exports", "__export", "Marquee", "MarqueeImageContent", "MarqueeList", "MarqueeTextContent", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_fast_marquee", "import_components", "import_utils", "React", "children", "props", "ref", "FastMarquee", "className", "image", "text"]
|
|
7
7
|
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var k=(p,e)=>{for(var o in e)d(p,o,{get:e[o],enumerable:!0})},y=(p,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of u(e))!c.call(p,a)&&a!==o&&d(p,a,{get:()=>e[a],enumerable:!(l=b(e,a))||l.enumerable});return p};var f=p=>y(d({},"__esModule",{value:!0}),p);var h={};k(h,{default:()=>v});module.exports=f(h);var t=require("react/jsx-runtime"),q=require("react"),s=require("../../components/index.js"),n=require("../../shared/Styles.js");const w=({title:p,description:e,backgroundImage:o,primaryButton:l,secondaryButton:a,shape:x="square",theme:r="light",className:i=""})=>{const m=()=>{},g=()=>{};return(0,t.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:`
|
|
2
2
|
relative w-full overflow-hidden bg-[#242426]
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
`,children:[(0,
|
|
3
|
+
${x==="round"?"rounded-none tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl":""}
|
|
4
|
+
${i}
|
|
5
|
+
`,children:[(0,t.jsx)("div",{className:"absolute inset-0 w-full h-full",style:{backgroundImage:`
|
|
6
6
|
radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
|
|
7
|
-
url(${
|
|
8
|
-
`,backgroundSize:"cover",backgroundPosition:"center"}}),(0,
|
|
7
|
+
url(${o})
|
|
8
|
+
`,backgroundSize:"cover",backgroundPosition:"center"}}),(0,t.jsx)("div",{className:`
|
|
9
9
|
relative w-full mx-auto
|
|
10
10
|
aspect-[343/200] xs:aspect-[343/200]
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
tablet:aspect-[343/200]
|
|
12
|
+
laptop:aspect-[592/336]
|
|
13
|
+
desktop:aspect-[800/448]
|
|
14
|
+
lg-desktop:aspect-[1000/560]
|
|
15
15
|
flex items-center
|
|
16
|
-
`,children:(0,
|
|
17
|
-
w-full px-4
|
|
18
|
-
flex flex-col gap-4
|
|
19
|
-
`,children:[(0,
|
|
16
|
+
`,children:(0,t.jsxs)("div",{className:`
|
|
17
|
+
w-full px-4 tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px]
|
|
18
|
+
flex flex-col gap-4 tablet:gap-5 laptop:gap-6 desktop:gap-7 lg-desktop:gap-8
|
|
19
|
+
`,children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2 tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4",children:[(0,t.jsx)("h2",{className:`
|
|
20
20
|
member-equity-title font-mont font-bold text-white tracking-[-0.04em]
|
|
21
|
-
text-xl
|
|
21
|
+
text-xl tablet:text-2xl laptop:text-3xl desktop:text-4xl lg-desktop:text-[32px]
|
|
22
22
|
leading-[1.2]
|
|
23
|
-
max-w-[280px]
|
|
24
|
-
`,children:
|
|
23
|
+
max-w-[280px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]
|
|
24
|
+
`,children:p}),(0,t.jsx)("p",{className:`
|
|
25
25
|
member-equity-description font-pingfang font-semibold text-white tracking-[-0.02em]
|
|
26
|
-
text-sm
|
|
26
|
+
text-sm tablet:text-sm laptop:text-base desktop:text-lg lg-desktop:text-lg
|
|
27
27
|
leading-[1.4]
|
|
28
|
-
max-w-[260px]
|
|
29
|
-
`,children:
|
|
30
|
-
member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs
|
|
31
|
-
px-4
|
|
32
|
-
py-2
|
|
33
|
-
${
|
|
34
|
-
`,children:
|
|
35
|
-
member-equity-button-secondary text-xs
|
|
36
|
-
px-4
|
|
37
|
-
py-2
|
|
38
|
-
${
|
|
39
|
-
`,children:
|
|
28
|
+
max-w-[260px] tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
|
|
29
|
+
`,children:e})]}),(0,t.jsxs)("div",{className:"flex items-center gap-3 tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4",children:[(0,t.jsx)(s.Button,{theme:r,variant:"primary",onClick:m,className:`
|
|
30
|
+
member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base
|
|
31
|
+
px-4 tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 hover:bg-white hover:text-black
|
|
32
|
+
py-2 tablet:py-[10px] laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px]
|
|
33
|
+
${x==="round"?"rounded-[16px] tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px]":""}
|
|
34
|
+
`,children:l.text}),(0,t.jsx)(s.Button,{theme:r,variant:"secondary",onClick:g,className:`
|
|
35
|
+
member-equity-button-secondary text-xs tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base
|
|
36
|
+
px-4 tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7
|
|
37
|
+
py-2 tablet:py-[10px] laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px]
|
|
38
|
+
${x==="round"?"rounded-[16px] tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px]":""}
|
|
39
|
+
`,children:a.text})]})]})})]})};var v=(0,n.withStyles)(w);
|
|
40
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { Button } from '../../components/index.js';\nimport { withStyles } from '../../shared/Styles.js';\nimport type { MemberEquityProps } from './types.js';\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n title,\n description,\n backgroundImage,\n primaryButton,\n secondaryButton,\n shape = 'square',\n theme = 'light',\n className = '',\n}) => {\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'round' ? 'rounded-none
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCM,IAAAI,EAAA,6BAnCNC,EAAkB,iBAClBC,EAAuB,qCACvBC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CACjD,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,SACR,MAAAC,EAAQ,QACR,UAAAC,EAAY,EACd,IAAM,CAEJ,MAAMC,EAA2B,IAAM,CAGvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA;AAAA,UAEPJ,IAAU,QAAU,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { Button } from '../../components/index.js';\nimport { withStyles } from '../../shared/Styles.js';\nimport type { MemberEquityProps } from './types.js';\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n title,\n description,\n backgroundImage,\n primaryButton,\n secondaryButton,\n shape = 'square',\n theme = 'light',\n className = '',\n}) => {\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={`\n relative w-full overflow-hidden bg-[#242426]\n ${shape === 'round' ? 'rounded-none tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl' : ''}\n ${className}\n `}\n >\n\n <div\n className=\"absolute inset-0 w-full h-full\"\n style={{\n backgroundImage: `\n radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),\n url(${backgroundImage})\n `,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n }}\n />\n <div className={`\n relative w-full mx-auto\n aspect-[343/200] xs:aspect-[343/200]\n tablet:aspect-[343/200] \n laptop:aspect-[592/336]\n desktop:aspect-[800/448]\n lg-desktop:aspect-[1000/560]\n flex items-center\n `}>\n <div className={`\n w-full px-4 tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px]\n flex flex-col gap-4 tablet:gap-5 laptop:gap-6 desktop:gap-7 lg-desktop:gap-8\n `}>\n <div className=\"flex flex-col gap-2 tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4\">\n <h2 className={`\n member-equity-title font-mont font-bold text-white tracking-[-0.04em]\n text-xl tablet:text-2xl laptop:text-3xl desktop:text-4xl lg-desktop:text-[32px]\n leading-[1.2]\n max-w-[280px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]\n `}>\n {title}\n </h2>\n <p className={`\n member-equity-description font-pingfang font-semibold text-white tracking-[-0.02em]\n text-sm tablet:text-sm laptop:text-base desktop:text-lg lg-desktop:text-lg\n leading-[1.4]\n max-w-[260px] tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]\n `}>\n {description}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-3 tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4\">\n <Button\n theme={theme}\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={`\n member-equity-button-primary bg-transparent border-white border-[1px] text-white text-xs tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base\n px-4 tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 hover:bg-white hover:text-black\n py-2 tablet:py-[10px] laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px]\n ${shape === 'round' ? 'rounded-[16px] tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px]' : ''}\n `}\n >\n {primaryButton.text}\n </Button>\n <Button\n theme={theme}\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={`\n member-equity-button-secondary text-xs tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base\n px-4 tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7\n py-2 tablet:py-[10px] laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px]\n ${shape === 'round' ? 'rounded-[16px] tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px]' : ''}\n `}\n >\n {secondaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n );\n};\n\nexport default withStyles(MemberEquity); "],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCM,IAAAI,EAAA,6BAnCNC,EAAkB,iBAClBC,EAAuB,qCACvBC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CACjD,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,SACR,MAAAC,EAAQ,QACR,UAAAC,EAAY,EACd,IAAM,CAEJ,MAAMC,EAA2B,IAAM,CAGvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA;AAAA,UAEPJ,IAAU,QAAU,uEAAyE,EAAE;AAAA,UAC/FE,CAAS;AAAA,QAIb,oBAAC,OACC,UAAU,iCACV,MAAO,CACL,gBAAiB;AAAA;AAAA,kBAETL,CAAe;AAAA,YAEvB,eAAgB,QAChB,mBAAoB,QACtB,EACF,KACA,OAAC,OAAI,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASd,oBAAC,OAAI,UAAW;AAAA;AAAA;AAAA,UAId,qBAAC,OAAI,UAAU,+EACb,oBAAC,MAAG,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAMZ,SAAAF,EACH,KACA,OAAC,KAAE,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAMX,SAAAC,EACH,GACF,KAGA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,MAAOK,EACP,QAAQ,UACR,QAASE,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPH,IAAU,QAAU,8GAAgH,EAAE;AAAA,gBAGzI,SAAAF,EAAc,KACjB,KACA,OAAC,UACC,MAAOG,EACP,QAAQ,YACR,QAASG,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPJ,IAAU,QAAU,8GAAgH,EAAE;AAAA,gBAGzI,SAAAD,EAAgB,KACnB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOX,KAAQ,cAAWM,CAAY",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "shape", "theme", "className", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
flex-1 bg-transparent border-[#1D1D1F] border box-border text-[#1D1D1F] text-xs
|
|
3
|
-
px-4
|
|
4
|
-
${
|
|
5
|
-
`,children:
|
|
6
|
-
flex-1 bg-[#1D1D1F] border-[#1D1D1F] border text-white box-border text-xs
|
|
7
|
-
px-4
|
|
8
|
-
${
|
|
9
|
-
`,children:
|
|
1
|
+
"use strict";var y=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},x=(t,o,a,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of D(o))!w.call(t,r)&&r!==a&&d(t,r,{get:()=>o[r],enumerable:!(l=h(o,r))||l.enumerable});return t};var m=(t,o,a)=>(a=t!=null?y(N(t)):{},x(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>x(d({},"__esModule",{value:!0}),t);var I={};B(I,{default:()=>S});module.exports=F(I);var e=require("react/jsx-runtime"),E=require("react"),p=require("../../helpers/utils.js"),c=m(require("../../components/picture.js")),i=m(require("../../components/button.js"));const C=({className:t="",shape:o="square",itemShape:a="square",products:l=[],primaryButton:r,secondaryButton:u,event:n})=>{const f=s=>{n?.primaryButton?.onClick?.(s)},k=s=>{n?.secondaryButton?.onClick(s)};return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:(0,p.cn)("w-full",t),children:(0,e.jsx)("div",{className:(0,p.cn)("flex overflow-hidden"),children:(0,e.jsx)("div",{className:(0,p.cn)("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:l?.map((s,b)=>(0,e.jsxs)("div",{className:(0,p.cn)("bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px]","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",a==="round"?"rounded-2xl":"rounded-none"),children:[(0,e.jsx)("div",{className:(0,p.cn)("h-[137px] overflow-hidden relative inline-block mb-2","desktop:mb-3 desktop:h-[195px]"),children:(0,e.jsx)(c.default,{source:s?.img||"",className:"h-full [&_img]:w-auto object-cover flex justify-center"})}),(0,e.jsx)("div",{className:"mb-1 flex gap-1 flex-wrap desktop:mb-2",children:s?.tagItems?.map((v,g)=>(0,e.jsx)("div",{className:"border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold rounded-3xl text-[#00BEFA] desktop:text-base",children:v},g))}),(0,e.jsx)("p",{className:"flex-1 font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] desktop:text-2xl",children:s?.title||""}),(0,e.jsx)("h3",{className:"mt-1 mb-5 text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] desktop:mt-2 desktop:mb-6 desktop:text-lg",children:s?.subTitle||""}),(0,e.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,e.jsx)("div",{className:"font-bold text-xl text-[#1D1D1F] desktop:text-2xl",children:s?.price||""}),(0,e.jsx)("div",{className:"ml-1 font-bold text-xl text-[#86868C] desktop:text-2xl",children:s?.basePrice||""})]}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(i.default,{variant:"primary",onClick:()=>f(s),className:`
|
|
2
|
+
flex-1 bg-transparent border-[#1D1D1F] border box-border text-[#1D1D1F] text-xs laptop:text-sm desktop:text-base
|
|
3
|
+
px-4 laptop:px-6 desktop:px-7 hover:bg-transparent hover:text-black py-2 laptop:py-2.5 desktop:py-3 tracking-[-0.04em]
|
|
4
|
+
${o==="round"?"rounded-[20px] desktop:rounded-3xl":""}
|
|
5
|
+
`,children:r||""}),(0,e.jsx)(i.default,{variant:"secondary",onClick:()=>k(s),className:`
|
|
6
|
+
flex-1 bg-[#1D1D1F] border-[#1D1D1F] border text-white box-border text-xs laptop:text-sm desktop:text-base
|
|
7
|
+
px-4 laptop:px-6 desktop:px-7 py-2 laptop:py-2.5 desktop:py-3 tracking-[-0.04em]
|
|
8
|
+
${o==="round"?"rounded-[20px] desktop:rounded-3xl":""}
|
|
9
|
+
`,children:u||""})]})]},b))})})})})};var S=C;
|
|
10
10
|
//# sourceMappingURL=index.js.map
|