@anker-in/headless-ui 0.0.27-alpha.30 → 0.0.27-alpha.31
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/MemberEquity/index.js +6 -9
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/types.d.ts +3 -3
- package/dist/cjs/biz-components/MemberEquity/types.js +1 -1
- package/dist/cjs/biz-components/MemberEquity/types.js.map +1 -1
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +2 -2
- package/dist/cjs/stories/MemberEquity.stories.js +2 -2
- package/dist/cjs/stories/MemberEquity.stories.js.map +2 -2
- package/dist/cjs/types/props.d.ts +10 -0
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +3 -3
- package/dist/esm/biz-components/MemberEquity/index.js +6 -9
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/types.d.ts +3 -3
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +2 -2
- package/dist/esm/stories/MemberEquity.stories.js +2 -2
- package/dist/esm/stories/MemberEquity.stories.js.map +2 -2
- package/dist/esm/types/props.d.ts +10 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var w=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var C=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},h=(e,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of D(a))!z.call(e,l)&&l!==r&&m(e,l,{get:()=>a[l],enumerable:!(i=B(a,l))||i.enumerable});return e};var F=(e,a,r)=>(r=e!=null?w(H(e)):{},h(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),P=e=>h(m({},"__esModule",{value:!0}),e);var T={};C(T,{default:()=>R});module.exports=P(T);var t=require("react/jsx-runtime"),c=F(require("react")),o=require("../../components/index.js"),s=require("../../helpers/index.js"),v=require("../../shared/Styles.js");const x=c.default.forwardRef(({data:e,className:a},r)=>{const{title:i,subtitle:l,pcImage:b,mobileImage:N,primaryButton:d,secondaryButton:u,theme:n="light",products:p=[]}=e,g=n==="dark"?"text-white":"text-[#1D1D1F]",y=n==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:r,className:(0,s.cn)(n==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)(o.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${b.url} , ${N.url} 767`}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32",children:[i&&(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)(o.Heading,{as:"h1",size:5,className:(0,s.cn)("hero-banner-title",g),html:i}),(0,t.jsx)(o.Text,{className:(0,s.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",g),html:l})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[u&&(0,t.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:u.text}),d&&(0,t.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})]})]}),p.length>0&&(0,t.jsx)("div",{className:"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6",children:p.map((k,f)=>(0,t.jsxs)(c.default.Fragment,{children:[(0,t.jsx)(o.Text,{className:(0,s.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",n==="dark"?"text-white":"text-[#1D1D1F]"),children:k.title}),f<p.length-1&&(0,t.jsx)("div",{className:(0,s.cn)("h-4 w-px",y)})]},f))})]})});x.displayName="HeroBanner";var R=(0,v.withStyles)(x);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle,
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,
|
|
6
|
-
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n {title && (\n <div className=\"max-w-[686px] space-y-4\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n <Text\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"absolute bottom-0 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 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAC5GW,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKP,EACL,aAAW,MACTO,IAAU,OAAS,YAAc,GACjC,2JACAR,CACF,EAEA,oBAAC,WACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGI,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,KAEA,QAAC,OAAI,UAAU,2FACZ,UAAAH,MACC,QAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,oBAAqBQ,CAAc,EAAG,KAAMR,EAAO,KAC3F,OAAC,QACC,aAAW,MACT,4EACAQ,CACF,EACA,KAAMP,EACR,GACF,KAGF,QAAC,OAAI,UAAU,0BACZ,UAAAI,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,4DACZ,SAAAA,EAAS,IAAI,CAACG,EAASC,OACtB,QAAC,EAAAf,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAU,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAI,EAAQ,MACX,EACCC,EAAQJ,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,WAAYE,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDhB,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
|
|
6
|
+
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "products", "textColorClass", "dividerColorClass", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { ButtonProps } from '../../components/button.js';
|
|
2
|
-
import type { Theme } from '../../types/props.js';
|
|
2
|
+
import type { Media, Theme } from '../../types/props.js';
|
|
3
3
|
export interface HeroBannerProps {
|
|
4
4
|
data: {
|
|
5
5
|
/** 主标题 */
|
|
6
6
|
title: string;
|
|
7
7
|
/** 副标题/描述文本 */
|
|
8
8
|
subtitle: string;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
pcImage: Media;
|
|
10
|
+
mobileImage: Media;
|
|
11
11
|
/** 主按钮文本和配置 */
|
|
12
12
|
primaryButton?: {
|
|
13
13
|
text: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var a=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!m.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(o=s(t,r))||o.enumerable});return e};var c=e=>a(i({},"__esModule",{value:!0}),e);var d={};module.exports=c(d);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -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.js'\nimport type { Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n
|
|
4
|
+
"sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n data: {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n subtitle: string\n pcImage: Media\n mobileImage: Media\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\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n products?: Array<{\n title: string\n }>\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
"use strict";"use client";var r=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
flex
|
|
7
|
-
aspect-[343/200]
|
|
8
|
-
w-full items-center
|
|
1
|
+
"use strict";"use client";var r=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var f=(a,t)=>{for(var p in t)r(a,p,{get:t[p],enumerable:!0})},h=(a,t,p,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of k(t))!x.call(a,o)&&o!==p&&r(a,o,{get:()=>t[o],enumerable:!(s=v(t,o))||s.enumerable});return a};var N=a=>h(r({},"__esModule",{value:!0}),a);var C={};f(C,{default:()=>B});module.exports=N(C);var e=require("react/jsx-runtime"),w=require("react"),l=require("../../components/index.js"),d=require("../../shared/Styles.js"),i=require("../../helpers/utils.js");const q=({data:a,className:t=""})=>{const{title:p,description:s,backgroundImage:o,mobileBackgroundImage:c,primaryButton:m,secondaryButton:n,theme:u,shape:b}=a,g=()=>{},y=()=>{};return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,i.cn)(`tablet:aspect-[740/480] laptop:aspect-[1024/336] desktop:aspect-[1440/448] lg-desktop:aspect-[1920/560] relative
|
|
2
|
+
aspect-[390/480] overflow-hidden`,t,{"aiui-dark":u==="dark","rounded-box":b==="rounded"}),children:[(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:o?.url,type:"video/mp4"})}),(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:c?.url,type:"video/mp4"})}),(0,e.jsx)("div",{className:`
|
|
3
|
+
absolute
|
|
4
|
+
inset-0
|
|
5
|
+
flex w-full items-center
|
|
9
6
|
`,children:(0,e.jsxs)("div",{className:`
|
|
10
7
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
|
|
11
8
|
desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
|
|
12
|
-
`,children:[(0,e.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,e.jsx)(
|
|
9
|
+
`,children:[(0,e.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,e.jsx)(l.Heading,{as:"h2",size:5,className:"member-equity-title ",html:p}),(0,e.jsx)(l.Text,{size:3,className:"member-equity-description",html:s})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{variant:"secondary",onClick:y,className:(0,i.cn)("member-equity-button-secondary"),children:n.text}),(0,e.jsx)(l.Button,{variant:"primary",onClick:g,className:(0,i.cn)("member-equity-button-primary"),children:m.text})]})]})})]})};var B=(0,d.withStyles)(q);
|
|
13
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[1024/336] desktop:aspect-[1440/448] lg-desktop:aspect-[1920/560] relative\n aspect-[390/480] overflow-hidden`,\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n <div\n className={`\n absolute \n inset-0\n flex w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <Heading as=\"h2\" size={5} className={`member-equity-title `} html={title} />\n <Text size={3} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary')}\n >\n {secondaryButton.text}\n </Button>\n <Button variant=\"primary\" onClick={handleButtonPrimaryClick} className={cn('member-equity-button-primary')}>\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgCQ,IAAAI,EAAA,6BA/BRC,EAAkB,iBAClBC,EAAsC,qCACtCC,EAA2B,kCAE3BC,EAAmB,kCAEnB,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAC/GT,EACIU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT;AAAA,0CAEAV,EACA,CACE,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,oBAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,mBAAC,UAAO,IAAKL,GAAiB,IAAK,KAAK,YAAY,EACtD,KACA,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKC,GAAuB,IAAK,KAAK,YAAY,EAC5D,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA,QAMX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,YACR,QAASQ,EACT,aAAW,MAAG,gCAAgC,EAE7C,SAAAJ,EAAgB,KACnB,KACA,OAAC,UAAO,QAAQ,UAAU,QAASG,EAA0B,aAAW,MAAG,8BAA8B,EACtG,SAAAJ,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOd,KAAQ,cAAWO,CAAY",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js';
|
|
1
|
+
import type { ComponentCommonProps, Media, Shape, Theme } from '../../types/props.js';
|
|
2
2
|
export interface MemberEquityProps extends ComponentCommonProps {
|
|
3
3
|
data: {
|
|
4
4
|
/** 标题 */
|
|
@@ -6,8 +6,8 @@ export interface MemberEquityProps extends ComponentCommonProps {
|
|
|
6
6
|
/** 描述文本 */
|
|
7
7
|
description: string;
|
|
8
8
|
/** 背景图片/视频 URL */
|
|
9
|
-
backgroundImage
|
|
10
|
-
mobileBackgroundImage?:
|
|
9
|
+
backgroundImage?: Media;
|
|
10
|
+
mobileBackgroundImage?: Media;
|
|
11
11
|
/** 主按钮配置 */
|
|
12
12
|
primaryButton: {
|
|
13
13
|
text: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!m.call(t,r)&&r!==s&&n(t,r,{get:()=>e[r],enumerable:!(o=i(e,r))||o.enumerable});return t};var g=t=>p(n({},"__esModule",{value:!0}),t);var d={};module.exports=g(d);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n data: {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247/\u89C6\u9891 URL */\n backgroundImage
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Media, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n data: {\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0\u6587\u672C */\n description: string\n /** \u80CC\u666F\u56FE\u7247/\u89C6\u9891 URL */\n backgroundImage?: Media\n mobileBackgroundImage?: Media\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton: {\n text: string\n href: string\n }\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton: {\n text: string\n href: string\n }\n /** \u5F62\u72B6 */\n shape?: Shape\n /** \u4E3B\u9898 */\n theme?: Theme\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},s=(e,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!d.call(e,a)&&a!==r&&i(e,a,{get:()=>t[a],enumerable:!(m=u(t,a))||m.enumerable});return e};var k=(e,t,r)=>(r=e!=null?p(c(e)):{},s(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),f=e=>s(i({},"__esModule",{value:!0}),e);var w={};h(w,{DarkTheme:()=>B,LightTheme:()=>P,WithoutSecondaryButton:()=>A,default:()=>b});module.exports=f(w);var l=k(require("../biz-components/HeroBanner/HeroBanner.js"));const y={title:"Biz-Components/HeroBanner",component:l.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -6,5 +6,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
6
6
|
- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868
|
|
9
|
-
`}}},tags:["autodocs"]};var y
|
|
9
|
+
`}}},tags:["autodocs"]};var b=y;const o="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",n="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",P={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},products:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},B={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:n,alt:"dark background",thumbnailURL:n,mimeType:"image/jpeg"},mobileImage:{url:n,alt:"dark background",thumbnailURL:n,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},products:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},A={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"default background",thumbnailURL:o,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},products:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};
|
|
10
10
|
//# sourceMappingURL=HeroBanner.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/HeroBanner.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n background: defaultBackground,\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n background: darkBackground,\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n background: defaultBackground,\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GACA,IAAAO,EAAuB,yDAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EACJ,gJAEIC,EACJ,2GAEWR,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GACA,IAAAO,EAAuB,yDAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EACJ,gJAEIC,EACJ,2GAEWR,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKO,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,SAAU,CACR,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaR,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKS,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,SAAU,CACR,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaP,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKM,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,SAAU,CACR,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF",
|
|
6
6
|
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "darkBackground"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var p=Object.create;var
|
|
1
|
+
"use strict";var p=Object.create;var r=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var d=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},m=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of u(t))!g.call(e,a)&&a!==o&&r(e,a,{get:()=>t[a],enumerable:!(s=c(t,a))||s.enumerable});return e};var h=(e,t,o)=>(o=e!=null?p(l(e)):{},m(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),y=e=>m(r({},"__esModule",{value:!0}),e);var q={};d(q,{CustomButtons:()=>B,CustomStyles:()=>k,Default:()=>n,Round:()=>x,default:()=>f});module.exports=y(q);var i=h(require("../biz-components/MemberEquity/index.js"));const b={title:"Biz-Components/MemberEquity",component:i.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002
|
|
3
3
|
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
7
7
|
.member-equity-description
|
|
8
8
|
.member-equity-button-primary
|
|
9
9
|
.member-equity-button-secondary
|
|
10
|
-
`}}},tags:["autodocs"]};var f=
|
|
10
|
+
`}}},tags:["autodocs"]};var f=b;const n={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:{alt:"backgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},mobileBackgroundImage:{alt:"mobileBackgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"}}},x={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:{url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",alt:"backgroundImage",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"rounded"}}},B={args:{data:{...n.args?.data,title:"Premium Experience",description:"Join our community to get early access to new products and exclusive member benefits.",backgroundImage:{alt:"backgroundImage",url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",thumbnailURL:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",mimeType:"image/jpeg"},mobileBackgroundImage:{alt:"mobileBackgroundImage",url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",thumbnailURL:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",mimeType:"image/jpeg"},primaryButton:{text:"Join Now",href:"/join"},secondaryButton:{text:"Explore Benefits",href:"/benefits"}}}},k={args:{data:{title:"Become a Member Today and opportunities",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:{alt:"backgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},mobileBackgroundImage:{alt:"mobileBackgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"},style:`
|
|
11
11
|
.member-equity-title {
|
|
12
12
|
background: linear-gradient(
|
|
13
13
|
90deg,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/MemberEquity.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n },\n}\n\n// \u5706\u89D2\u98CE\u683C\nexport const Round: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'rounded',\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6309\u94AE\nexport const CustomButtons: Story = {\n args: {\n data: {\n ...Default.args?.data,\n title: 'Premium Experience',\n description: 'Join our community to get early access to new products and exclusive member benefits.',\n backgroundImage: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n primaryButton: {\n text: 'Join Now',\n href: '/join',\n },\n secondaryButton: {\n text: 'Explore Benefits',\n href: '/benefits',\n },\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\nexport const CustomStyles: Story = {\n args: {\n data: {\n title: 'Become a Member Today and opportunities',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n style: `\n .member-equity-title {\n background: linear-gradient(\n 90deg,\n #FFD700, /* \u91D1\u8272 (Gold) */\n #FFC000, /* \u4EAE\u91D1\u8272 (Light Gold) */\n #FFA500, /* \u6A59\u8272 (Orange) */\n #FF8C00, /* \u6DF1\u6A59\u8272 (Dark Orange) */\n #FF6B00 /* \u6A59\u7EA2\u8272 (Red-Orange) */\n );\n -webkit-background-clip: text; /* \u517C\u5BB9 WebKit \u6D4F\u89C8\u5668 */\n background-clip: text;\n color: transparent; /* \u9690\u85CF\u539F\u59CB\u6587\u5B57\u989C\u8272 */\n }\n .member-equity-description {\n color: blue;\n }\n .member-equity-button-primary {\n color: green;\n }\n `,\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,iBAAAC,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GACA,IAAAQ,EAAyB,sDAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIR,MAAML,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,+
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: {\n alt: 'backgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n mobileBackgroundImage: {\n alt: 'mobileBackgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n },\n}\n\n// \u5706\u89D2\u98CE\u683C\nexport const Round: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: {\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n alt: 'backgroundImage',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'rounded',\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6309\u94AE\nexport const CustomButtons: Story = {\n args: {\n data: {\n ...Default.args?.data,\n title: 'Premium Experience',\n description: 'Join our community to get early access to new products and exclusive member benefits.',\n backgroundImage: {\n alt: 'backgroundImage',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n thumbnailURL: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n mimeType: 'image/jpeg',\n },\n mobileBackgroundImage: {\n alt: 'mobileBackgroundImage',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n thumbnailURL: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Join Now',\n href: '/join',\n },\n secondaryButton: {\n text: 'Explore Benefits',\n href: '/benefits',\n },\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\nexport const CustomStyles: Story = {\n args: {\n data: {\n title: 'Become a Member Today and opportunities',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: {\n alt: 'backgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n mobileBackgroundImage: {\n alt: 'mobileBackgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n style: `\n .member-equity-title {\n background: linear-gradient(\n 90deg,\n #FFD700, /* \u91D1\u8272 (Gold) */\n #FFC000, /* \u4EAE\u91D1\u8272 (Light Gold) */\n #FFA500, /* \u6A59\u8272 (Orange) */\n #FF8C00, /* \u6DF1\u6A59\u8272 (Dark Orange) */\n #FF6B00 /* \u6A59\u7EA2\u8272 (Red-Orange) */\n );\n -webkit-background-clip: text; /* \u517C\u5BB9 WebKit \u6D4F\u89C8\u5668 */\n background-clip: text;\n color: transparent; /* \u9690\u85CF\u539F\u59CB\u6587\u5B57\u989C\u8272 */\n }\n .member-equity-description {\n color: blue;\n }\n .member-equity-button-primary {\n color: green;\n }\n `,\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,iBAAAC,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GACA,IAAAQ,EAAyB,sDAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIR,MAAML,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,CACf,IAAK,kBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,sBAAuB,CACrB,IAAK,wBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,CACF,CACF,EAGaC,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,CACf,IAAK,+DACL,IAAK,kBACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,SACT,CACF,CACF,EAGaH,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGE,EAAQ,MAAM,KACjB,MAAO,qBACP,YAAa,wFACb,gBAAiB,CACf,IAAK,kBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,sBAAuB,CACrB,IAAK,wBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,mBACN,KAAM,WACR,CACF,CACF,CACF,EAGaD,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,YACE,sGACF,gBAAiB,CACf,IAAK,kBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,sBAAuB,CACrB,IAAK,wBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,EACA,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAqBT,CACF",
|
|
6
6
|
"names": ["MemberEquity_stories_exports", "__export", "CustomButtons", "CustomStyles", "Default", "Round", "MemberEquity_stories_default", "__toCommonJS", "import_MemberEquity", "meta", "MemberEquity"]
|
|
7
7
|
}
|
|
@@ -15,3 +15,13 @@ export type Video = {
|
|
|
15
15
|
export type Theme = 'light' | 'dark';
|
|
16
16
|
export type Shape = 'rounded' | 'square';
|
|
17
17
|
export type Align = 'left' | 'center' | 'right';
|
|
18
|
+
export type Media = {
|
|
19
|
+
alt: string;
|
|
20
|
+
url: string;
|
|
21
|
+
thumbnailURL: string;
|
|
22
|
+
mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
|
|
23
|
+
width?: number;
|
|
24
|
+
height?: number;
|
|
25
|
+
focalX?: number;
|
|
26
|
+
focalY?: number;
|
|
27
|
+
};
|
package/dist/cjs/types/props.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var m=(t,e,p,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of o(e))!a.call(t,r)&&r!==p&&i(t,r,{get:()=>e[r],enumerable:!(n=g(e,r))||n.enumerable});return t};var s=t=>m(i({},"__esModule",{value:!0}),t);var l={};module.exports=s(l);
|
|
2
2
|
//# sourceMappingURL=props.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/types/props.ts"],
|
|
4
|
-
"sourcesContent": ["export interface ComponentCommonProps {\n style?: string\n event?: any\n condition?: any\n className?: string\n key?: string\n}\n\nexport type Img = {\n url: string\n alt?: string\n}\n\nexport type Video = {\n url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n"],
|
|
4
|
+
"sourcesContent": ["export interface ComponentCommonProps {\n style?: string\n event?: any\n condition?: any\n className?: string\n key?: string\n}\n\nexport type Img = {\n url: string\n alt?: string\n}\n\nexport type Video = {\n url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n alt: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp'\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["props_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import p from"react";import{Button as c,Heading as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import p from"react";import{Button as c,Heading as k,Picture as w,Text as d}from"../../components/index.js";import{cn as t}from"../../helpers/index.js";import{withStyles as B}from"../../shared/Styles.js";const u=p.forwardRef(({data:g,className:f},h)=>{const{title:l,subtitle:x,pcImage:v,mobileImage:b,primaryButton:s,secondaryButton:i,theme:r="light",products:o=[]}=g,n=r==="dark"?"text-white":"text-[#1D1D1F]",N=r==="dark"?"bg-white":"bg-[#1D1D1F]";return a("div",{"data-ui-component-id":"HeroBanner",ref:h,className:t(r==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden",f),children:[e(w,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${v.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32",children:[l&&a("div",{className:"max-w-[686px] space-y-4",children:[e(k,{as:"h1",size:5,className:t("hero-banner-title",n),html:l}),e(d,{className:t("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",n),html:x})]}),a("div",{className:"flex items-center gap-4",children:[i&&e(c,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text}),s&&e(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:s.text})]})]}),o.length>0&&e("div",{className:"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6",children:o.map((y,m)=>a(p.Fragment,{children:[e(d,{className:t("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",r==="dark"?"text-white":"text-[#1D1D1F]"),children:y.title}),m<o.length-1&&e("div",{className:t("h-4 w-px",N)})]},m))})]})});u.displayName="HeroBanner";var F=B(u);export{F as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle,
|
|
5
|
-
"mappings": "aAsBM,cAAAA,
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n data-ui-component-id=\"HeroBanner\"\n ref={ref}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <Picture\n className=\"laptop:w-full absolute h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage.url} , ${mobileImage.url} 767`}\n />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n {title && (\n <div className=\"max-w-[686px] space-y-4\">\n <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n <Text\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n html={subtitle}\n />\n </div>\n )}\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"absolute bottom-0 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 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "aAsBM,cAAAA,EAQI,QAAAC,MARJ,oBArBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAC5GW,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,OACElB,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,2JACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAEAf,EAAC,OAAI,UAAU,2FACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,oBAAqBc,CAAc,EAAG,KAAMR,EAAO,EAC3Fb,EAACM,EAAA,CACC,UAAWC,EACT,4EACAc,CACF,EACA,KAAMP,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,0BACZ,UAAAiB,GACClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,GACjBpB,EAAC,OAAI,UAAU,4DACZ,SAAAoB,EAAS,IAAI,CAACG,EAASC,IACtBvB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,gFACAY,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAI,EAAQ,MACX,EACCC,EAAQJ,EAAS,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,WAAYe,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDf,EAAW,YAAc,aAEzB,IAAOgB,EAAQjB,EAAWC,CAAU",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "products", "textColorClass", "dividerColorClass", "product", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { ButtonProps } from '../../components/button.js';
|
|
2
|
-
import type { Theme } from '../../types/props.js';
|
|
2
|
+
import type { Media, Theme } from '../../types/props.js';
|
|
3
3
|
export interface HeroBannerProps {
|
|
4
4
|
data: {
|
|
5
5
|
/** 主标题 */
|
|
6
6
|
title: string;
|
|
7
7
|
/** 副标题/描述文本 */
|
|
8
8
|
subtitle: string;
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
pcImage: Media;
|
|
10
|
+
mobileImage: Media;
|
|
11
11
|
/** 主按钮文本和配置 */
|
|
12
12
|
primaryButton?: {
|
|
13
13
|
text: string;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as o,Heading as y,Text as v}from"../../components/index.js";import{withStyles as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
flex
|
|
7
|
-
aspect-[343/200]
|
|
8
|
-
w-full items-center
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as o,Heading as y,Text as v}from"../../components/index.js";import{withStyles as k}from"../../shared/Styles.js";import{cn as a}from"../../helpers/utils.js";const x=({data:l,className:p=""})=>{const{title:s,description:i,backgroundImage:r,mobileBackgroundImage:d,primaryButton:c,secondaryButton:m,theme:n,shape:u}=l,b=()=>{},g=()=>{};return t("section",{"data-ui-component-id":"MemberEquity",className:a(`tablet:aspect-[740/480] laptop:aspect-[1024/336] desktop:aspect-[1440/448] lg-desktop:aspect-[1920/560] relative
|
|
2
|
+
aspect-[390/480] overflow-hidden`,p,{"aiui-dark":n==="dark","rounded-box":u==="rounded"}),children:[e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:r?.url,type:"video/mp4"})}),e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:e("source",{src:d?.url,type:"video/mp4"})}),e("div",{className:`
|
|
3
|
+
absolute
|
|
4
|
+
inset-0
|
|
5
|
+
flex w-full items-center
|
|
9
6
|
`,children:t("div",{className:`
|
|
10
7
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
|
|
11
8
|
desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
|
|
12
|
-
`,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(y,{as:"h2",size:5,className:"member-equity-title ",
|
|
9
|
+
`,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(y,{as:"h2",size:5,className:"member-equity-title ",html:s}),e(v,{size:3,className:"member-equity-description",html:i})]}),t("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[e(o,{variant:"secondary",onClick:g,className:a("member-equity-button-secondary"),children:m.text}),e(o,{variant:"primary",onClick:b,className:a("member-equity-button-primary"),children:c.text})]})]})})]})};var C=k(x);export{C as default};
|
|
13
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[1024/336] desktop:aspect-[1440/448] lg-desktop:aspect-[1920/560] relative\n aspect-[390/480] overflow-hidden`,\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n <div\n className={`\n absolute \n inset-0\n flex w-full items-center\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n `}\n >\n <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n <Heading as=\"h2\" size={5} className={`member-equity-title `} html={title} />\n <Text size={3} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary')}\n >\n {secondaryButton.text}\n </Button>\n <Button variant=\"primary\" onClick={handleButtonPrimaryClick} className={cn('member-equity-button-primary')}>\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "aAgCQ,cAAAA,EAkBE,QAAAC,MAlBF,oBA/BR,MAAkB,QAClB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,MAAAC,MAAU,yBAEnB,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAC/GT,EACIU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,OACElB,EAAC,WACC,uBAAqB,eACrB,UAAWK,EACT;AAAA,0CAEAG,EACA,CACE,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,UAAAjB,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,SAAAA,EAAC,UAAO,IAAKY,GAAiB,IAAK,KAAK,YAAY,EACtD,EACAZ,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKa,GAAuB,IAAK,KAAK,YAAY,EAC5D,EACAb,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA,QAMX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMO,EAAO,EAC1EV,EAACI,EAAA,CAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMO,EAAa,GAC5E,EAEAV,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,QAAQ,YACR,QAASiB,EACT,UAAWb,EAAG,gCAAgC,EAE7C,SAAAS,EAAgB,KACnB,EACAf,EAACE,EAAA,CAAO,QAAQ,UAAU,QAASgB,EAA0B,UAAWZ,EAAG,8BAA8B,EACtG,SAAAQ,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOM,EAAQf,EAAWE,CAAY",
|
|
6
6
|
"names": ["jsx", "jsxs", "Button", "Heading", "Text", "withStyles", "cn", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js';
|
|
1
|
+
import type { ComponentCommonProps, Media, Shape, Theme } from '../../types/props.js';
|
|
2
2
|
export interface MemberEquityProps extends ComponentCommonProps {
|
|
3
3
|
data: {
|
|
4
4
|
/** 标题 */
|
|
@@ -6,8 +6,8 @@ export interface MemberEquityProps extends ComponentCommonProps {
|
|
|
6
6
|
/** 描述文本 */
|
|
7
7
|
description: string;
|
|
8
8
|
/** 背景图片/视频 URL */
|
|
9
|
-
backgroundImage
|
|
10
|
-
mobileBackgroundImage?:
|
|
9
|
+
backgroundImage?: Media;
|
|
10
|
+
mobileBackgroundImage?: Media;
|
|
11
11
|
/** 主按钮配置 */
|
|
12
12
|
primaryButton: {
|
|
13
13
|
text: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r from"../biz-components/HeroBanner/HeroBanner.js";const o={title:"Biz-Components/HeroBanner",component:r,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -6,5 +6,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
6
6
|
- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868
|
|
9
|
-
`}}},tags:["autodocs"]};var
|
|
9
|
+
`}}},tags:["autodocs"]};var i=o;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",t="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",n={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},products:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},m={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},products:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},s={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},products:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};export{m as DarkTheme,n as LightTheme,s as WithoutSecondaryButton,i as default};
|
|
10
10
|
//# sourceMappingURL=HeroBanner.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/HeroBanner.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n background: defaultBackground,\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n background: darkBackground,\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n background: defaultBackground,\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "AACA,OAAOA,MAAgB,6CAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EACJ,gJAEIC,EACJ,2GAEWC,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u652F\u6301\u5E95\u90E8\u4EA7\u54C1\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n products: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAOA,MAAgB,6CAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SASb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EACJ,gJAEIC,EACJ,2GAEWC,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKF,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,SAAU,CACR,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaG,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKF,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,SAAU,CACR,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaG,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKJ,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,SAAU,CACR,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF",
|
|
6
6
|
"names": ["HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "darkBackground", "LightTheme", "DarkTheme", "WithoutSecondaryButton"]
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
7
7
|
.member-equity-description
|
|
8
8
|
.member-equity-button-primary
|
|
9
9
|
.member-equity-button-secondary
|
|
10
|
-
`}}},tags:["autodocs"]};var
|
|
10
|
+
`}}},tags:["autodocs"]};var r=t;const o={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:{alt:"backgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},mobileBackgroundImage:{alt:"mobileBackgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"}}},s={args:{data:{title:"Become a Member Today",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:{url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",alt:"backgroundImage",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"rounded"}}},m={args:{data:{...o.args?.data,title:"Premium Experience",description:"Join our community to get early access to new products and exclusive member benefits.",backgroundImage:{alt:"backgroundImage",url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",thumbnailURL:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",mimeType:"image/jpeg"},mobileBackgroundImage:{alt:"mobileBackgroundImage",url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",thumbnailURL:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e",mimeType:"image/jpeg"},primaryButton:{text:"Join Now",href:"/join"},secondaryButton:{text:"Explore Benefits",href:"/benefits"}}}},i={args:{data:{title:"Become a Member Today and opportunities",description:"Gain early access to new products, exclusive deals, and opportunities to try our products for free.",backgroundImage:{alt:"backgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},mobileBackgroundImage:{alt:"mobileBackgroundImage",url:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",thumbnailURL:"https://images.unsplash.com/photo-1484807352052-23338990c6c6",mimeType:"image/jpeg"},primaryButton:{text:"Shop Now",href:"/shop"},secondaryButton:{text:"Learn More",href:"/learn"},shape:"square"},style:`
|
|
11
11
|
.member-equity-title {
|
|
12
12
|
background: linear-gradient(
|
|
13
13
|
90deg,
|
|
@@ -27,5 +27,5 @@ MemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\
|
|
|
27
27
|
.member-equity-button-primary {
|
|
28
28
|
color: green;
|
|
29
29
|
}
|
|
30
|
-
`}};export{
|
|
30
|
+
`}};export{m as CustomButtons,i as CustomStyles,o as Default,s as Round,r as default};
|
|
31
31
|
//# sourceMappingURL=MemberEquity.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/MemberEquity.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n },\n}\n\n// \u5706\u89D2\u98CE\u683C\nexport const Round: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'rounded',\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6309\u94AE\nexport const CustomButtons: Story = {\n args: {\n data: {\n ...Default.args?.data,\n title: 'Premium Experience',\n description: 'Join our community to get early access to new products and exclusive member benefits.',\n backgroundImage: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n primaryButton: {\n text: 'Join Now',\n href: '/join',\n },\n secondaryButton: {\n text: 'Explore Benefits',\n href: '/benefits',\n },\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\nexport const CustomStyles: Story = {\n args: {\n data: {\n title: 'Become a Member Today and opportunities',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n style: `\n .member-equity-title {\n background: linear-gradient(\n 90deg,\n #FFD700, /* \u91D1\u8272 (Gold) */\n #FFC000, /* \u4EAE\u91D1\u8272 (Light Gold) */\n #FFA500, /* \u6A59\u8272 (Orange) */\n #FF8C00, /* \u6DF1\u6A59\u8272 (Dark Orange) */\n #FF6B00 /* \u6A59\u7EA2\u8272 (Red-Orange) */\n );\n -webkit-background-clip: text; /* \u517C\u5BB9 WebKit \u6D4F\u89C8\u5668 */\n background-clip: text;\n color: transparent; /* \u9690\u85CF\u539F\u59CB\u6587\u5B57\u989C\u8272 */\n }\n .member-equity-description {\n color: blue;\n }\n .member-equity-button-primary {\n color: green;\n }\n `,\n },\n}\n"],
|
|
5
|
-
"mappings": "AACA,OAAOA,MAAkB,0CAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,+
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MemberEquity from '../biz-components/MemberEquity/index.js'\n\nconst meta: Meta<typeof MemberEquity> = {\n title: 'Biz-Components/MemberEquity',\n component: MemberEquity,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: ` \nMemberEquity \u7EC4\u4EF6\u662F\u7528\u4E8E\u5C55\u793A\u4F1A\u5458\u6743\u76CA\u7684\u7EC4\u4EF6\u3002 \n\n\n### \u81EA\u5B9A\u4E49style \u53EF\u7528class \n.member-equity-title \n.member-equity-description \n.member-equity-button-primary \n.member-equity-button-secondary \n `,\n },\n },\n },\n tags: ['autodocs'],\n}\n\nexport default meta\ntype Story = StoryObj<typeof MemberEquity>\n\n// \u9ED8\u8BA4\u6837\u5F0F - \u65B9\u5F62\nexport const Default: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: {\n alt: 'backgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n mobileBackgroundImage: {\n alt: 'mobileBackgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n },\n}\n\n// \u5706\u89D2\u98CE\u683C\nexport const Round: Story = {\n args: {\n data: {\n title: 'Become a Member Today',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: {\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n alt: 'backgroundImage',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'rounded',\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6309\u94AE\nexport const CustomButtons: Story = {\n args: {\n data: {\n ...Default.args?.data,\n title: 'Premium Experience',\n description: 'Join our community to get early access to new products and exclusive member benefits.',\n backgroundImage: {\n alt: 'backgroundImage',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n thumbnailURL: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n mimeType: 'image/jpeg',\n },\n mobileBackgroundImage: {\n alt: 'mobileBackgroundImage',\n url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n thumbnailURL: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Join Now',\n href: '/join',\n },\n secondaryButton: {\n text: 'Explore Benefits',\n href: '/benefits',\n },\n },\n },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\nexport const CustomStyles: Story = {\n args: {\n data: {\n title: 'Become a Member Today and opportunities',\n description:\n 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',\n backgroundImage: {\n alt: 'backgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n mobileBackgroundImage: {\n alt: 'mobileBackgroundImage',\n url: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n thumbnailURL: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',\n mimeType: 'image/jpeg',\n },\n primaryButton: {\n text: 'Shop Now',\n href: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n href: '/learn',\n },\n shape: 'square',\n },\n style: `\n .member-equity-title {\n background: linear-gradient(\n 90deg,\n #FFD700, /* \u91D1\u8272 (Gold) */\n #FFC000, /* \u4EAE\u91D1\u8272 (Light Gold) */\n #FFA500, /* \u6A59\u8272 (Orange) */\n #FF8C00, /* \u6DF1\u6A59\u8272 (Dark Orange) */\n #FF6B00 /* \u6A59\u7EA2\u8272 (Red-Orange) */\n );\n -webkit-background-clip: text; /* \u517C\u5BB9 WebKit \u6D4F\u89C8\u5668 */\n background-clip: text;\n color: transparent; /* \u9690\u85CF\u539F\u59CB\u6587\u5B57\u989C\u8272 */\n }\n .member-equity-description {\n color: blue;\n }\n .member-equity-button-primary {\n color: green;\n }\n `,\n },\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAOA,MAAkB,0CAEzB,MAAMC,EAAkC,CACtC,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,CACf,IAAK,kBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,sBAAuB,CACrB,IAAK,wBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,CACF,CACF,EAGaC,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,MAAO,wBACP,YACE,sGACF,gBAAiB,CACf,IAAK,+DACL,IAAK,kBACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,SACT,CACF,CACF,EAGaC,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGF,EAAQ,MAAM,KACjB,MAAO,qBACP,YAAa,wFACb,gBAAiB,CACf,IAAK,kBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,sBAAuB,CACrB,IAAK,wBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,mBACN,KAAM,WACR,CACF,CACF,CACF,EAGaG,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,0CACP,YACE,sGACF,gBAAiB,CACf,IAAK,kBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,sBAAuB,CACrB,IAAK,wBACL,IAAK,+DACL,aAAc,+DACd,SAAU,YACZ,EACA,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,MAAO,QACT,EACA,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAqBT,CACF",
|
|
6
6
|
"names": ["MemberEquity", "meta", "MemberEquity_stories_default", "Default", "Round", "CustomButtons", "CustomStyles"]
|
|
7
7
|
}
|
|
@@ -15,3 +15,13 @@ export type Video = {
|
|
|
15
15
|
export type Theme = 'light' | 'dark';
|
|
16
16
|
export type Shape = 'rounded' | 'square';
|
|
17
17
|
export type Align = 'left' | 'center' | 'right';
|
|
18
|
+
export type Media = {
|
|
19
|
+
alt: string;
|
|
20
|
+
url: string;
|
|
21
|
+
thumbnailURL: string;
|
|
22
|
+
mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
|
|
23
|
+
width?: number;
|
|
24
|
+
height?: number;
|
|
25
|
+
focalX?: number;
|
|
26
|
+
focalY?: number;
|
|
27
|
+
};
|