@anker-in/headless-ui 1.0.26-alpha.1762500619766 → 1.0.26-alpha.1762509077023
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/Countdown.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/Countdown.js.map +3 -3
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +2 -0
- package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/Title/types.d.ts +2 -1
- package/dist/cjs/biz-components/Title/types.js +1 -1
- package/dist/cjs/biz-components/Title/types.js.map +1 -1
- package/dist/cjs/stories/imageWithText.stories.js +2 -2
- package/dist/cjs/stories/imageWithText.stories.js.map +2 -2
- package/dist/cjs/types/props.d.ts +1 -1
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/HeroBanner/Countdown.js +1 -1
- package/dist/esm/biz-components/HeroBanner/Countdown.js.map +3 -3
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/ImageWithText/types.d.ts +2 -0
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/Title/types.d.ts +2 -1
- package/dist/esm/stories/imageWithText.stories.js +2 -2
- package/dist/esm/stories/imageWithText.stories.js.map +2 -2
- package/dist/esm/types/props.d.ts +1 -1
- package/package.json +1 -1
- package/tailwind.config.js +4 -2
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";var r=Object.create;var
|
|
1
|
+
"use strict";var r=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,i)=>{for(var a in i)c(e,a,{get:i[a],enumerable:!0})},l=(e,i,a,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of g(i))!b.call(e,n)&&n!==a&&c(e,n,{get:()=>i[n],enumerable:!(p=f(i,n))||p.enumerable});return e};var u=(e,i,a)=>(a=e!=null?r(h(e)):{},l(i||!e||!e.__esModule?c(a,"default",{value:e,enumerable:!0}):a,e)),_=e=>l(c({},"__esModule",{value:!0}),e);var B={};y(B,{DarkTheme:()=>x,Default:()=>S,LayoutBottom:()=>U,LayoutRight:()=>P,LayoutTop:()=>k,MinimalContent:()=>I,TabMode:()=>E,TabModeThreeItems:()=>O,TabModeWithVideo:()=>z,WithCustomStyles:()=>N,WithDescriptionText:()=>R,WithDescriptionTextDark:()=>L,WithItems:()=>F,WithItemsDark:()=>w,WithItemsImageRight:()=>W,WithItemsVideo:()=>V,WithVideo:()=>C,WithVideoRight:()=>D,WithVideoTop:()=>A,WithoutSubtitle:()=>M,default:()=>T});module.exports=_(B);var J=require("react"),d=u(require("../biz-components/ImageWithText/index.js"));const v={title:"Biz Components/ImageWithText",component:d.default,parameters:{layout:"padded",docs:{description:{component:`\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A
|
|
2
2
|
|
|
3
3
|
1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E
|
|
4
4
|
2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E
|
|
5
5
|
|
|
6
|
-
\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09`}}},tags:["autodocs"]};var T=v;const s={theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},subtitle:"iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.",mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"}},S={args:{data:s},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F"}}}},x={args:{data:{...s,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898"}}}},M={args:{data:{...s,desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F"}}}},P={args:{data:{...s,theme:"dark",desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898"}}}},R={args:{data:{theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898"}}}},I={args:{data:{theme:"light",title:"Simple Title",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Simple Title",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Simple Title Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Simple Title Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E"}}}},L={args:{data:{...s,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0"}}}},k={args:{data:{...s,layout:"top"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A"}}}},U={args:{data:{...s,layout:"bottom"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0"}}}},o={title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",mediaType:"video",image:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},C={args:{data:o},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}}},A={args:{data:{...o,layout:"right"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0"}}}},F={args:{data:{...o,layout:"top"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F"}}}},m={title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",alt:"AI.See\u2122 Obstacle Avoidance Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",alt:"AI.See\u2122 Obstacle Avoidance Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",mimeType:"image/png"},items:[{icon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",text:"200+",desc:"Identifies and avoids 200+ objects."}]},W={args:{data:m},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E"}}}},D={args:{data:{...m,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7"}}}},w={args:{data:{...m,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898"}}}},V={args:{data:{title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",mediaType:"video",video:o.video,padVideo:o.video,mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"AI Feature Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"},poster:o.image,padPoster:o.image,mobPoster:o.mobileImage,items:m.items}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E"}}}},t={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},O={args:{data:t},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C"}}}},z={args:{data:{...t,datalist:[...t.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879"}}}},E={args:{data:{title:"Smart App Control",desc:"Effortless customization at your fingertips.",mediaType:"video",datalist:[{title:"Customizable Cleaning Modes",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Customizable Cleaning Modes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Customizable Cleaning Modes Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},image:t.datalist[0].image,imgPad:t.datalist[0].imgPad,imageMob:t.datalist[0].imageMob},{title:"Multi-Floor Mapping",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Multi-Floor Mapping Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Multi-Floor Mapping Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},image:t.datalist[1].image,imgPad:t.datalist[1].imgPad,imageMob:t.datalist[1].imageMob}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E"}}}},N={args:{data:s,className:"custom-image-with-text"},parameters:{docs:{description:{story:`
|
|
6
|
+
\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09`}}},tags:["autodocs"]};var T=v;const s={theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},subtitle:"iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.",mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},items:[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",alt:"LED",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",mimeType:"image/svg+xml"},text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",alt:"200+",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",mimeType:"image/svg+xml"},text:"200+",desc:"Identifies and avoids 200+ objects."}]},S={args:{data:s},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F"}}}},x={args:{data:{...s,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898"}}}},R={args:{data:{...s,desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F"}}}},L={args:{data:{...s,theme:"dark",desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898"}}}},M={args:{data:{theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898"}}}},I={args:{data:{theme:"light",title:"Simple Title",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Simple Title",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Simple Title Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Simple Title Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E"}}}},P={args:{data:{...s,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0"}}}},k={args:{data:{...s,layout:"top"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A"}}}},U={args:{data:{...s,layout:"bottom"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0"}}}},o={title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",mediaType:"video",image:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},C={args:{data:o},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}}},D={args:{data:{...o,layout:"right"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0"}}}},A={args:{data:{...o,layout:"top"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F"}}}},m={title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",alt:"AI.See\u2122 Obstacle Avoidance Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",alt:"AI.See\u2122 Obstacle Avoidance Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",mimeType:"image/png"},items:[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",alt:"LED",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",mimeType:"image/svg+xml"},text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",alt:"200+",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",mimeType:"image/svg+xml"},text:"200+",desc:"Identifies and avoids 200+ objects."}]},F={args:{data:m},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E"}}}},W={args:{data:{...m,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7"}}}},w={args:{data:{...m,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898"}}}},V={args:{data:{title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",mediaType:"video",video:o.video,padVideo:o.video,mobVideo:o.mobVideo,items:m.items}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E"}}}},t={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},E={args:{data:t},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C"}}}},O={args:{data:{...t,datalist:[...t.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879"}}}},z={args:{data:{title:"Smart App Control",desc:"Effortless customization at your fingertips.",mediaType:"video",datalist:[{title:"Customizable Cleaning Modes",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Customizable Cleaning Modes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},image:t.datalist[0].image,imgPad:t.datalist[0].imgPad,imageMob:t.datalist[0].imageMob},{title:"Multi-Floor Mapping",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Multi-Floor Mapping Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},image:t.datalist[1].image,imgPad:t.datalist[1].imgPad,imageMob:t.datalist[1].imageMob}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E"}}}},N={args:{data:s,className:"custom-image-with-text"},parameters:{docs:{description:{story:`
|
|
7
7
|
\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
|
|
8
8
|
|
|
9
9
|
**\u6839\u5143\u7D20\uFF1A**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/imageWithText.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ImageWithText from '../biz-components/ImageWithText/index.js'\nimport type { ImageWithTextProps } from '../biz-components/ImageWithText/types.js'\n\nconst meta = {\n title: 'Biz Components/ImageWithText',\n component: ImageWithText,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component:\n '\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A\\n\\n' +\n '1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E\\n' +\n '2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E\\n\\n' +\n '\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ImageWithText>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ImageWithTextProps['data'] = {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n subtitle: 'iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.',\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F',\n },\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithDescriptionText: Story = {\n args: {\n data: {\n ...defaultData,\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F',\n },\n },\n },\n}\n\nexport const WithDescriptionTextDark: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898',\n },\n },\n },\n}\n\nexport const MinimalContent: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Simple Title',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Simple Title',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Simple Title Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Simple Title Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u5E03\u5C40\u4F4D\u7F6E\u53D8\u4F53 ====================\n\nexport const LayoutRight: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const LayoutTop: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'top',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A',\n },\n },\n },\n}\n\nexport const LayoutBottom: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'bottom',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301 ====================\n\nconst videoData: ImageWithTextProps['data'] = {\n title: 'DuoSpiral\u2122 Detangle Brushes',\n subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n mediaType: 'video',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n alt: 'DuoSpiral\u2122 Detangle Brushes',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'image/png',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'video/mp4',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n mimeType: 'image/png',\n },\n mobileVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n mimeType: 'video/mp4',\n },\n}\n\nexport const WithVideo: Story = {\n args: {\n data: videoData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD',\n },\n },\n },\n}\n\nexport const WithVideoRight: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'right',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const WithVideoTop: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'top',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 ====================\n\nconst featureData: ImageWithTextProps['data'] = {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n alt: 'AI.See\u2122 Obstacle Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n alt: 'AI.See\u2122 Obstacle Avoidance Pad',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n alt: 'AI.See\u2122 Obstacle Avoidance Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n mimeType: 'image/png',\n },\n items: [\n {\n icon: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n text: 'LED',\n desc: 'Equipped with LEDs for dark environments',\n },\n {\n icon: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n text: '200+',\n desc: 'Identifies and avoids 200+ objects.',\n },\n ],\n}\n\nexport const WithItems: Story = {\n args: {\n data: featureData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithItemsImageRight: Story = {\n args: {\n data: {\n ...featureData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7',\n },\n },\n },\n}\n\nexport const WithItemsDark: Story = {\n args: {\n data: {\n ...featureData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithItemsVideo: Story = {\n args: {\n data: {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n mediaType: 'video',\n video: videoData.video,\n padVideo: videoData.video,\n mobVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n alt: 'AI Feature Video',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n mimeType: 'video/mp4',\n },\n poster: videoData.image,\n padPoster: videoData.image,\n mobPoster: videoData.mobileImage,\n items: featureData.items,\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== TabWithImage \u6A21\u5F0F ====================\n\nconst tabData: ImageWithTextProps['data'] = {\n desc: 'Effortless customization at your fingertips.',\n title: 'Smart App Control',\n datalist: [\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Customizable Cleaning Modes',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Customizable Cleaning Modes',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Customizable Cleaning Modes Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Customizable Cleaning Modes Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n alt: 'Multi-Floor Mapping',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n mimeType: 'image/png',\n },\n title: 'Multi-Floor Mapping',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n alt: 'Multi-Floor Mapping Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n alt: 'Multi-Floor Mapping Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n mimeType: 'image/png',\n },\n },\n ],\n}\n\nexport const TabMode: Story = {\n args: {\n data: tabData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C',\n },\n },\n },\n}\n\nexport const TabModeThreeItems: Story = {\n args: {\n data: {\n ...tabData,\n datalist: [\n ...tabData.datalist!,\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Smart Scheduling',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Smart Scheduling',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Smart Scheduling Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Smart Scheduling Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879',\n },\n },\n },\n}\n\nexport const TabModeWithVideo: Story = {\n args: {\n data: {\n title: 'Smart App Control',\n desc: 'Effortless customization at your fingertips.',\n mediaType: 'video',\n datalist: [\n {\n title: 'Customizable Cleaning Modes',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Customizable Cleaning Modes Video',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'video/mp4',\n },\n poster: {\n url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n alt: 'Customizable Cleaning Modes Poster',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'image/png',\n },\n image: tabData.datalist![0].image,\n imgPad: tabData.datalist![0].imgPad,\n imageMob: tabData.datalist![0].imageMob,\n },\n {\n title: 'Multi-Floor Mapping',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Multi-Floor Mapping Video',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'video/mp4',\n },\n poster: {\n url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n alt: 'Multi-Floor Mapping Poster',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'image/png',\n },\n image: tabData.datalist![1].image,\n imgPad: tabData.datalist![1].imgPad,\n imageMob: tabData.datalist![1].imageMob,\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-image-with-text',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.image-with-text\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n- \\`.image-with-text--dark\\` - \u6DF1\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n- \\`.image-with-text--light\\` - \u6D45\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.image-with-text__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.image-with-text__title\\` - \u6807\u9898\n- \\`.image-with-text__subtitle\\` - \u526F\u6807\u9898\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.image-with-text__description\\` - \u63CF\u8FF0\u5BB9\u5668\n- \\`.image-with-text__description-icon\\` - \u63CF\u8FF0\u56FE\u6807\n- \\`.image-with-text__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.image-with-text__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.image-with-text__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5E03\u5C40\u95F4\u8DDD */\n.image-with-text {\n gap: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.image-with-text__title {\n color: #2563eb;\n font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.image-with-text__image:hover {\n transform: scale(1.05);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u56FE\u6807 */\n.image-with-text__description-icon {\n filter: brightness(1.2);\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,YAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,cAAAC,EAAA,mBAAAC,EAAA,YAAAC,EAAA,sBAAAC,EAAA,qBAAAC,EAAA,qBAAAC,EAAA,wBAAAC,EAAA,4BAAAC,EAAA,cAAAC,EAAA,kBAAAC,EAAA,wBAAAC,EAAA,mBAAAC,EAAA,cAAAC,EAAA,mBAAAC,EAAA,iBAAAC,EAAA,oBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAvB,GAAA,IAAAwB,EAAkB,iBAElBC,EAA0B,uDAG1B,MAAMC,EAAO,CACX,MAAO,+BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UACE;AAAA;AAAA;AAAA;AAAA;AAAA,mKAIJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAA0C,CAC9C,MAAO,QACP,MAAO,qBACP,MAAO,CACL,IAAK,6FACL,IAAK,qBACL,aAAc,6FACd,SAAU,WACZ,EACA,SAAU,2GACV,YAAa,CACX,IAAK,qGACL,IAAK,4BACL,aAAc,qGACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,sLACL,IAAK,yBACL,aACE,sLACF,SAAU,WACZ,CACF,EAEazB,EAAiB,CAC5B,KAAM,CACJ,KAAMyB,CACR,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,yNACT,CACF,CACF,CACF,EAEa1B,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAG0B,EACH,MAAO,MACT,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,sIACT,CACF,CACF,CACF,EAEahB,EAA6B,CACxC,KAAM,CACJ,KAAM,CACJ,GAAGgB,EACH,KAAM,WACN,SACE,mHACJ,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,6KACT,CACF,CACF,CACF,EAEaf,EAAiC,CAC5C,KAAM,CACJ,KAAM,CACJ,GAAGe,EACH,MAAO,OACP,KAAM,WACN,SACE,mHACJ,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,mFACT,CACF,CACF,CACF,EAEaP,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,QACP,MAAO,qBACP,MAAO,CACL,IAAK,6FACL,IAAK,qBACL,aAAc,6FACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,sLACL,IAAK,yBACL,aACE,sLACF,SAAU,WACZ,EACA,YAAa,CACX,IAAK,qGACL,IAAK,4BACL,aACE,qGACF,SAAU,WACZ,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qJACT,CACF,CACF,CACF,EAEad,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,QACP,MAAO,eACP,MAAO,CACL,IAAK,6FACL,IAAK,eACL,aAAc,6FACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,sLACL,IAAK,mBACL,aACE,sLACF,SAAU,WACZ,EACA,YAAa,CACX,IAAK,qGACL,IAAK,sBACL,aACE,qGACF,SAAU,WACZ,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,yIACT,CACF,CACF,CACF,EAIaF,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,GAAGuB,EACH,OAAQ,OACV,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,oMACT,CACF,CACF,CACF,EAEatB,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGsB,EACH,OAAQ,KACV,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4OACT,CACF,CACF,CACF,EAEaxB,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,GAAGwB,EACH,OAAQ,QACV,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qMACT,CACF,CACF,CACF,EAIMC,EAAwC,CAC5C,MAAO,mCACP,SAAU,mGACV,UAAW,QACX,MAAO,CACL,IAAK,8HACL,IAAK,mCACL,aACE,8HACF,SAAU,WACZ,EACA,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aACE,8HACF,SAAU,WACZ,EACA,YAAa,CACX,IAAK,8HACL,IAAK,0CACL,aACE,8HACF,SAAU,WACZ,EACA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ImageWithText from '../biz-components/ImageWithText/index.js'\nimport type { ImageWithTextProps } from '../biz-components/ImageWithText/types.js'\n\nconst meta = {\n title: 'Biz Components/ImageWithText',\n component: ImageWithText,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component:\n '\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A\\n\\n' +\n '1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E\\n' +\n '2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E\\n\\n' +\n '\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ImageWithText>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ImageWithTextProps['data'] = {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n subtitle: 'iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.',\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n items: [\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n alt: 'LED',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: 'LED',\n desc: 'Equipped with LEDs for dark environments',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n alt: '200+',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: '200+',\n desc: 'Identifies and avoids 200+ objects.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F',\n },\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithDescriptionText: Story = {\n args: {\n data: {\n ...defaultData,\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F',\n },\n },\n },\n}\n\nexport const WithDescriptionTextDark: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898',\n },\n },\n },\n}\n\nexport const MinimalContent: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Simple Title',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Simple Title',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Simple Title Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Simple Title Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u5E03\u5C40\u4F4D\u7F6E\u53D8\u4F53 ====================\n\nexport const LayoutRight: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const LayoutTop: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'top',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A',\n },\n },\n },\n}\n\nexport const LayoutBottom: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'bottom',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301 ====================\n\nconst videoData: ImageWithTextProps['data'] = {\n title: 'DuoSpiral\u2122 Detangle Brushes',\n subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n mediaType: 'video',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n alt: 'DuoSpiral\u2122 Detangle Brushes',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'image/png',\n },\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'video/mp4',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n mimeType: 'image/png',\n },\n mobVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n mimeType: 'video/mp4',\n },\n}\n\nexport const WithVideo: Story = {\n args: {\n data: videoData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD',\n },\n },\n },\n}\n\nexport const WithVideoRight: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'right',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const WithVideoTop: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'top',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 ====================\n\nconst featureData: ImageWithTextProps['data'] = {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n alt: 'AI.See\u2122 Obstacle Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n alt: 'AI.See\u2122 Obstacle Avoidance Pad',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n alt: 'AI.See\u2122 Obstacle Avoidance Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n mimeType: 'image/png',\n },\n items: [\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n alt: 'LED',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: 'LED',\n desc: 'Equipped with LEDs for dark environments',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n alt: '200+',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: '200+',\n desc: 'Identifies and avoids 200+ objects.',\n },\n ],\n}\n\nexport const WithItems: Story = {\n args: {\n data: featureData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithItemsImageRight: Story = {\n args: {\n data: {\n ...featureData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7',\n },\n },\n },\n}\n\nexport const WithItemsDark: Story = {\n args: {\n data: {\n ...featureData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithItemsVideo: Story = {\n args: {\n data: {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n mediaType: 'video',\n video: videoData.video,\n padVideo: videoData.video,\n mobVideo: videoData.mobVideo,\n items: featureData.items,\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== TabWithImage \u6A21\u5F0F ====================\n\nconst tabData: ImageWithTextProps['data'] = {\n desc: 'Effortless customization at your fingertips.',\n title: 'Smart App Control',\n datalist: [\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Customizable Cleaning Modes',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Customizable Cleaning Modes',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Customizable Cleaning Modes Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Customizable Cleaning Modes Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n alt: 'Multi-Floor Mapping',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n mimeType: 'image/png',\n },\n title: 'Multi-Floor Mapping',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n alt: 'Multi-Floor Mapping Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n alt: 'Multi-Floor Mapping Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n mimeType: 'image/png',\n },\n },\n ],\n}\n\nexport const TabMode: Story = {\n args: {\n data: tabData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C',\n },\n },\n },\n}\n\nexport const TabModeThreeItems: Story = {\n args: {\n data: {\n ...tabData,\n datalist: [\n ...tabData.datalist!,\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Smart Scheduling',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Smart Scheduling',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Smart Scheduling Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Smart Scheduling Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879',\n },\n },\n },\n}\n\nexport const TabModeWithVideo: Story = {\n args: {\n data: {\n title: 'Smart App Control',\n desc: 'Effortless customization at your fingertips.',\n mediaType: 'video',\n datalist: [\n {\n title: 'Customizable Cleaning Modes',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Customizable Cleaning Modes Video',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'video/mp4',\n },\n image: tabData.datalist![0].image,\n imgPad: tabData.datalist![0].imgPad,\n imageMob: tabData.datalist![0].imageMob,\n },\n {\n title: 'Multi-Floor Mapping',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Multi-Floor Mapping Video',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n mimeType: 'video/mp4',\n },\n image: tabData.datalist![1].image,\n imgPad: tabData.datalist![1].imgPad,\n imageMob: tabData.datalist![1].imageMob,\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-image-with-text',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.image-with-text\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n- \\`.image-with-text--dark\\` - \u6DF1\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n- \\`.image-with-text--light\\` - \u6D45\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.image-with-text__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.image-with-text__title\\` - \u6807\u9898\n- \\`.image-with-text__subtitle\\` - \u526F\u6807\u9898\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.image-with-text__description\\` - \u63CF\u8FF0\u5BB9\u5668\n- \\`.image-with-text__description-icon\\` - \u63CF\u8FF0\u56FE\u6807\n- \\`.image-with-text__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.image-with-text__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.image-with-text__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5E03\u5C40\u95F4\u8DDD */\n.image-with-text {\n gap: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.image-with-text__title {\n color: #2563eb;\n font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.image-with-text__image:hover {\n transform: scale(1.05);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u56FE\u6807 */\n.image-with-text__description-icon {\n filter: brightness(1.2);\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "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ACJ,KAAMgB,CACR,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qPACT,CACF,CACF,CACF,EAEad,EAA6B,CACxC,KAAM,CACJ,KAAM,CACJ,GAAGc,EACH,OAAQ,OACV,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qLACT,CACF,CACF,CACF,EAEaf,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGe,EACH,MAAO,MACT,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,gFACT,CACF,CACF,CACF,EAEab,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,kCACP,SAAU,0CACV,UAAW,QACX,MAAOY,EAAU,MACjB,SAAUA,EAAU,MACpB,SAAUA,EAAU,SACpB,MAAOC,EAAY,KACrB,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,0NACT,CACF,CACF,CACF,EAIMC,EAAsC,CAC1C,KAAM,+CACN,MAAO,oBACP,SAAU,CACR,CACE,MAAO,CACL,IAAK,gIACL,IAAK,8BACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,8BACP,OAAQ,CACN,IAAK,gIACL,IAAK,kCACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,qCACL,aACE,gIACF,SAAU,WACZ,CACF,EACA,CACE,MAAO,CACL,IAAK,kIACL,IAAK,sBACL,aACE,kIACF,SAAU,WACZ,EACA,MAAO,sBACP,OAAQ,CACN,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,kIACL,IAAK,6BACL,aACE,kIACF,SAAU,WACZ,CACF,CACF,CACF,EAEavB,EAAiB,CAC5B,KAAM,CACJ,KAAMuB,CACR,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,yLACT,CACF,CACF,CACF,EAEatB,EAA2B,CACtC,KAAM,CACJ,KAAM,CACJ,GAAGsB,EACH,SAAU,CACR,GAAGA,EAAQ,SACX,CACE,MAAO,CACL,IAAK,gIACL,IAAK,mBACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,mBACP,OAAQ,CACN,IAAK,gIACL,IAAK,uBACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,kDACT,CACF,CACF,CACF,EAEarB,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,oBACP,KAAM,+CACN,UAAW,QACX,SAAU,CACR,CACE,MAAO,8BACP,MAAO,CACL,IAAK,4EACL,IAAK,oCACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOqB,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,EACA,CACE,MAAO,sBACP,MAAO,CACL,IAAK,4EACL,IAAK,4BACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOA,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,oPACT,CACF,CACF,CACF,EAEapB,EAA0B,CACrC,KAAM,CACJ,KAAMiB,EACN,UAAW,wBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA+CT,CACF,CACF,CACF",
|
|
6
6
|
"names": ["imageWithText_stories_exports", "__export", "DarkTheme", "Default", "LayoutBottom", "LayoutRight", "LayoutTop", "MinimalContent", "TabMode", "TabModeThreeItems", "TabModeWithVideo", "WithCustomStyles", "WithDescriptionText", "WithDescriptionTextDark", "WithItems", "WithItemsDark", "WithItemsImageRight", "WithItemsVideo", "WithVideo", "WithVideoRight", "WithVideoTop", "WithoutSubtitle", "imageWithText_stories_default", "__toCommonJS", "import_react", "import_ImageWithText", "meta", "ImageWithText", "defaultData", "videoData", "featureData", "tabData"]
|
|
7
7
|
}
|
|
@@ -32,7 +32,7 @@ export type Media = {
|
|
|
32
32
|
baseUrl?: string;
|
|
33
33
|
url: string;
|
|
34
34
|
thumbnailURL: string;
|
|
35
|
-
mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
|
|
35
|
+
mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml';
|
|
36
36
|
filename?: string;
|
|
37
37
|
width?: number;
|
|
38
38
|
height?: number;
|
package/dist/cjs/types/props.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var m=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of a(e))!g.call(t,n)&&n!==o&&p(t,n,{get:()=>e[n],enumerable:!(r=i(e,n))||r.enumerable});return t};var s=t=>m(p({},"__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 id?: string\n key?: string\n}\n\nexport type ContainerProps = {\n containerMode?: Mode\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\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 id?: number\n alt: string | undefined\n baseUrl?: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp'\n filename?: string\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n poster?: {\n url: string\n mimeType: 'image/jpeg' | 'image/png' | 'image/webp'\n }\n}\n\nexport type GSAPContext = {\n gsap?: any\n ScrollTrigger?: any\n SplitText?: any\n}\n"],
|
|
4
|
+
"sourcesContent": ["export interface ComponentCommonProps {\n style?: string\n event?: any\n condition?: any\n className?: string\n id?: string\n key?: string\n}\n\nexport type ContainerProps = {\n containerMode?: Mode\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\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 id?: number\n alt: string | undefined\n baseUrl?: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml'\n filename?: string\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n poster?: {\n url: string\n mimeType: 'image/jpeg' | 'image/png' | 'image/webp'\n }\n}\n\nexport type GSAPContext = {\n gsap?: any\n ScrollTrigger?: any\n SplitText?: any\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 o}from"react/jsx-runtime";import{cn as i}from"../../helpers/index.js";import{useEffect as
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{cn as i}from"../../helpers/index.js";import{useEffect as M,useRef as E,useState as S}from"react";const r=(s,l=2)=>String(Math.abs(s)).padStart(l,"0"),c="h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box",d="lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold",P=({endDate:s,endDate_tz:l,locale:k,dateFormat:v,onExpire:x})=>{const u=()=>({day:"Day",hour:"Hours",minute:"Mins",second:"Secs"}),a=(()=>{if(!v)return u();try{const t=JSON.parse(v);return{...u(),...t}}catch{return u()}})(),n=E(Date.parse(s)),[C,g]=S(()=>{const t=n.current;return isNaN(t)?0:Math.max(0,t-Date.now())}),[m,N]=S(()=>{const t=n.current;return!isNaN(t)&&t<=Date.now()});M(()=>{n.current=Date.parse(s),g(isNaN(n.current)?0:Math.max(0,n.current-Date.now()));const t=n.current;N(!isNaN(t)&&t<=Date.now())},[s]),M(()=>{if(m||isNaN(n.current))return;let t=!1;const p=()=>{const z=Date.now(),y=Math.max(0,n.current-z);g(y),y<=0&&!t&&(t=!0,N(!0),x?.())};p();const O=window.setInterval(p,1e3);return()=>clearInterval(O)},[x,m]);const h=Math.floor(C/1e3),I=h%60,b=Math.floor(h/60),R=b%60,w=Math.floor(b/60),H=w%24,T=Math.floor(w/24),F=l||Intl.DateTimeFormat().resolvedOptions().timeZone;let D="\u2014";const f=n.current;if(!isNaN(f))try{const t=new Date(f);D=new Intl.DateTimeFormat(k||navigator.language,{timeZone:F,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(t)}catch{D=new Date(f).toISOString()}return m?null:o("div",{className:"w-full flex gap-1 items-center countdown-box","aria-live":"polite",children:[o("div",{className:i(c,"time-days-box"),children:[e("p",{className:d,children:r(T,2)}),e("div",{children:a?.day||"Day"})]}),e("div",{className:"text-2xl font-bold text-info-white",children:":"}),o("div",{className:i(c,"time-hours-box"),children:[e("p",{className:d,children:r(H,2)}),e("div",{children:a?.hour||"Hours"})]}),e("div",{className:"text-2xl font-bold text-info-white",children:":"}),o("div",{className:i(c,"time-minutes-box"),children:[e("p",{className:d,children:r(R,2)}),e("div",{children:a?.minute||"Mins"})]}),e("div",{className:"text-2xl font-bold text-info-white",children:":"}),o("div",{className:i(c,"time-seconds-box"),children:[e("p",{className:d,children:r(I,2)}),e("div",{children:a?.second||"Secs"})]})]})};var L=P;export{P as CountdownByEndDate,L as default};
|
|
2
2
|
//# sourceMappingURL=Countdown.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/Countdown.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\ntype Props = {\n endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n dateFormat?: string\n onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n 'h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass = 'lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, dateFormat, onExpire }) => {\n const bannerDate = dateFormat
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "cn", "useEffect", "useRef", "useState", "pad", "n", "len", "baseClass", "textClass", "CountdownByEndDate", "endDate", "endDate_tz", "locale", "dateFormat", "onExpire", "bannerDate", "targetMsRef", "remainingMs", "setRemainingMs", "hidden", "setHidden", "expiredCalled", "tick", "now", "rem", "id", "totalSeconds", "seconds", "totalMinutes", "minutes", "totalHours", "hours", "days", "displayTz", "formattedTarget", "tms", "dt", "Countdown_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\ntype Props = {\n endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n dateFormat?: string\n onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n 'h-full text-center bg-info-white text-xs text-info-primary lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass = 'lg-desktop:text-2xl lg-desktop:h-7 text-xl h-6 lg-desktop:w-10 w-9 font-bold'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, dateFormat, onExpire }) => {\n const getDefaultDateLabels = () => ({\n day: 'Day',\n hour: 'Hours',\n minute: 'Mins',\n second: 'Secs',\n })\n\n const bannerDate = (() => {\n if (!dateFormat) return getDefaultDateLabels()\n\n try {\n const parsed = JSON.parse(dateFormat)\n return { ...getDefaultDateLabels(), ...parsed }\n } catch {\n return getDefaultDateLabels()\n }\n })()\n // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n const targetMsRef = useRef<number>(Date.parse(endDate))\n const [remainingMs, setRemainingMs] = useState<number>(() => {\n const t = targetMsRef.current\n return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n })\n // \u4EC5\u5728\u521D\u59CB\u65F6\u5224\u65AD\u662F\u5426\u5DF2\u8FC7\u671F\uFF1A\u82E5\u5DF2\u8FC7\u671F\u5219\u9690\u85CF\u7EC4\u4EF6\u5E76\u4E0D\u7EE7\u7EED\u8BA1\u65F6\n const [hidden, setHidden] = useState<boolean>(() => {\n const t = targetMsRef.current\n return !isNaN(t) && t <= Date.now()\n })\n\n // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n useEffect(() => {\n targetMsRef.current = Date.parse(endDate)\n setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n // \u5F53 endDate \u66F4\u65B0\u65F6\uFF0C\u4EC5\u8FDB\u884C\u4E00\u6B21\u662F\u5426\u8FC7\u671F\u7684\u5224\u65AD\uFF0C\u7528\u4E8E\u51B3\u5B9A\u662F\u5426\u9690\u85CF\n const t = targetMsRef.current\n setHidden(!isNaN(t) && t <= Date.now())\n }, [endDate])\n\n // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n useEffect(() => {\n if (hidden) return // \u521D\u59CB\u5DF2\u8FC7\u671F\u5219\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n let expiredCalled = false\n const tick = () => {\n const now = Date.now()\n const rem = Math.max(0, targetMsRef.current - now)\n setRemainingMs(rem)\n if (rem <= 0 && !expiredCalled) {\n expiredCalled = true\n setHidden(true) // \u5230\u70B9\u540E\u9690\u85CF\u7EC4\u4EF6\n onExpire?.()\n }\n }\n tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n const id = window.setInterval(tick, 1000)\n return () => clearInterval(id)\n }, [onExpire, hidden])\n\n // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n const totalSeconds = Math.floor(remainingMs / 1000)\n const seconds = totalSeconds % 60\n const totalMinutes = Math.floor(totalSeconds / 60)\n const minutes = totalMinutes % 60\n const totalHours = Math.floor(totalMinutes / 60)\n const hours = totalHours % 24\n const days = Math.floor(totalHours / 24)\n\n // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n let formattedTarget = '\u2014'\n const tms = targetMsRef.current\n if (!isNaN(tms)) {\n try {\n const dt = new Date(tms)\n const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n timeZone: displayTz,\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n })\n formattedTarget = fmt.format(dt)\n } catch (e) {\n // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n formattedTarget = new Date(tms).toISOString()\n }\n }\n\n if (hidden) return null\n\n return (\n <div className=\"w-full flex gap-1 items-center countdown-box\" aria-live=\"polite\">\n {/* \u5929 */}\n <div className={cn(baseClass, 'time-days-box')}>\n <p className={textClass}>{pad(days, 2)}</p>\n <div>{bannerDate?.day || 'Day'}</div>\n </div>\n <div className=\"text-2xl font-bold text-info-white\">:</div>\n {/* \u65F6 */}\n <div className={cn(baseClass, 'time-hours-box')}>\n <p className={textClass}>{pad(hours, 2)}</p>\n <div>{bannerDate?.hour || 'Hours'}</div>\n </div>\n <div className=\"text-2xl font-bold text-info-white\">:</div>\n {/* \u5206 */}\n <div className={cn(baseClass, 'time-minutes-box')}>\n <p className={textClass}>{pad(minutes, 2)}</p>\n <div>{bannerDate?.minute || 'Mins'}</div>\n </div>\n <div className=\"text-2xl font-bold text-info-white\">:</div>\n {/* \u79D2 */}\n <div className={cn(baseClass, 'time-seconds-box')}>\n <p className={textClass}>{pad(seconds, 2)}</p>\n <div>{bannerDate?.second || 'Secs'}</div>\n </div>\n </div>\n )\n}\n\nexport default CountdownByEndDate\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "cn", "useEffect", "useRef", "useState", "pad", "n", "len", "baseClass", "textClass", "CountdownByEndDate", "endDate", "endDate_tz", "locale", "dateFormat", "onExpire", "getDefaultDateLabels", "bannerDate", "parsed", "targetMsRef", "remainingMs", "setRemainingMs", "hidden", "setHidden", "expiredCalled", "tick", "now", "rem", "id", "totalSeconds", "seconds", "totalMinutes", "minutes", "totalHours", "hours", "days", "displayTz", "formattedTarget", "tms", "dt", "Countdown_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import re,{useImperativeHandle as xe,useRef as h,useState as g,useEffect as ne}from"react";import{Heading as u,Picture as D,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as M}from"../../hooks/useIntersectionObserver.js";import{motion as q,AnimatePresence as B}from"framer-motion";const ge="image",ue="image_with_text",G=re.forwardRef(({data:J,className:K},Q)=>{const{title:_,subtitle:w,desc:v,descIcon:b,image:c,padImage:V,mobileImage:E,theme:k="dark",items:H=[],imagePosition:U,layout:X,mediaType:Y="image",datalist:m=[],video:S,padVideo:W,mobVideo:z,poster:Z,padPoster:ee,mobPoster:te,cols:f=1}=J,i=X||U||"left",y=h(null),N=h(null),T=h(null),I=h(null),[d,ie]=g(0),R=h([]),[A,ae]=g({left:0,width:0}),[n,oe]=g(""),[$,le]=g(""),[j,se]=g("");he(y,{componentType:ge,componentName:ue,componentTitle:_,componentDescription:w}),xe(Q,()=>y.current),ne(()=>{if(m.length>0){const t=R.current[d];if(t){const{offsetLeft:l,offsetWidth:x}=t;ae({left:l,width:x})}}},[d,m.length]),M(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),M(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}}),M(I,{once:!0,threshold:.1,callback:()=>{z?.url&&se(z.url)}});const me=(t,l)=>{ie(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,F=Y==="video",a=H.length>0,C=()=>{if(o&&m[d]){const t=m[d];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return c?`${c.url},${V?.url||c.url} 1024, ${E?.url||c.url} 768`:""},O=()=>{if(o){const p=m[d],P=p.poster?.url||p.image?.url,de=p.padPoster?.url||p.imgPad?.url||P,pe=p.mobPoster?.url||p.imageMob?.url||P;return e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:P,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},p.video?.url||p.image.url)})}const t=Z?.url||c?.url,l=ee?.url||V?.url||t,x=te?.url||E?.url||t;return s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:l,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return s("section",{ref:y,"data-ui-component-id":"ImageWithText",className:r("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!o,"flex-col":!o&&(i==="top"||i==="bottom"),"flex-col laptop:flex-row":!o&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":o,"image-with-text--dark text-white":k==="dark","image-with-text--light text-[#1f1f1f]":k==="light","aiui-dark":a&&k==="dark"},K),children:[o&&s("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{className:"image-with-text__header",children:[e(u,{as:"h3",size:4,html:_,className:"image-with-text__title"}),e(L,{as:"p",size:1,html:v,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:A.left,width:A.width}}),m.map((t,l)=>e("div",{ref:x=>{R.current[l]=x},onClick:x=>me(l,x),className:r("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",d===l?"image-with-text__tab--active text-black":"text-white"),children:e(u,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),!o&&s("div",{className:r("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":a,"order-1 laptop:order-2":a&&i==="left","order-1":a&&i==="right"||!a&&(i==="top"||i==="left"),"order-2":!a&&(i==="bottom"||i==="right")}),children:[e(u,{as:"h2",size:4,html:_,className:r("image-with-text__title",{"w-full text-left":a})}),w&&e(L,{as:"p",size:a?4:3,html:w,className:r("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!a,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":a})}),!a&&(v||b)&&s("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[b&&e("img",{src:b,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),v&&e(u,{as:"h4",size:5,html:v,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),a&&e("div",{className:r("image-with-text__items w-full grid gap-6",{"grid-cols-1":f===1,"grid-cols-2":f===2,"grid-cols-3":f===3,"grid-cols-4":f===4}),children:H.map((t,l)=>s("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[s("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[e(D,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(u,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(L,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},l))})]}),e("div",{className:r("image-with-text__media-wrapper",{"order-1":!o&&(i==="top"||i==="left"),"order-2":!o&&(i==="bottom"||i==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":a,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="right","relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":o}),children:o?F?O():e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(D,{source:C(),alt:m[d].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},m[d].image.url)}):F?O():e(D,{source:C(),className:r("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!a})})})]})});G.displayName="ImageWithText";var Ne=ce(G);export{Ne as default};
|
|
2
2
|
//# sourceMappingURL=ImageWithText.js.map
|