@anker-in/headless-ui 1.1.9-alpha.1764817121401 → 1.1.9-alpha.1764843603699
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.d.ts +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +2 -2
- package/dist/cjs/biz-components/AplusDesc/index.js +1 -1
- package/dist/cjs/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.d.ts +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.d.ts +1 -1
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/DownLoad/index.js +1 -1
- package/dist/cjs/biz-components/DownLoad/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.d.ts +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Faq/Faq.js +1 -1
- package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
- package/dist/cjs/biz-components/FootCharger/index.js +1 -1
- package/dist/cjs/biz-components/FootCharger/index.js.map +3 -3
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.d.ts +1 -1
- package/dist/cjs/biz-components/FooterNavigation/types.js.map +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.d.ts +5 -5
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +7 -7
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/types.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.d.ts +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/types.d.ts +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/types.js.map +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/SelectStore/index.js.map +1 -1
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +1 -1
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js.map +1 -1
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +1 -1
- package/dist/cjs/components/board.js +1 -1
- package/dist/cjs/components/board.js.map +1 -1
- package/dist/cjs/components/carousel.js +1 -1
- package/dist/cjs/components/carousel.js.map +1 -1
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.d.ts +5 -4
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +3 -3
- package/dist/cjs/stories/container.stories.js +1 -1
- package/dist/cjs/stories/container.stories.js.map +3 -3
- package/dist/cjs/stories/faq.stories.js.map +2 -2
- package/dist/cjs/stories/graphic.stories.js +1 -1
- package/dist/cjs/stories/graphic.stories.js.map +3 -3
- package/dist/cjs/stories/graphicAttractionBlock.stories.js +1 -1
- package/dist/cjs/stories/graphicAttractionBlock.stories.js.map +3 -3
- package/dist/esm/biz-components/AccordionCards/index.d.ts +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/AiuiProvider/index.js.map +2 -2
- package/dist/esm/biz-components/AplusDesc/index.js +1 -1
- package/dist/esm/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.d.ts +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/esm/biz-components/Category/index.d.ts +1 -1
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/DownLoad/index.js +1 -1
- package/dist/esm/biz-components/DownLoad/index.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.d.ts +1 -1
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Faq/Faq.js +1 -1
- package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
- package/dist/esm/biz-components/FootCharger/index.js +1 -1
- package/dist/esm/biz-components/FootCharger/index.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +1 -1
- package/dist/esm/biz-components/FooterNavigation/types.d.ts +1 -1
- package/dist/esm/biz-components/FooterNavigation/types.js.map +1 -1
- package/dist/esm/biz-components/GiftBox/index.js +1 -1
- package/dist/esm/biz-components/GiftBox/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.d.ts +5 -5
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/NavProvider.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +7 -7
- package/dist/esm/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/ModalContainer.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/types.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/types.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.d.ts +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/types.d.ts +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/types.js.map +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/SelectStore/index.js.map +1 -1
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +1 -1
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/Subscribe/index.js.map +1 -1
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +1 -1
- package/dist/esm/components/board.js +1 -1
- package/dist/esm/components/board.js.map +1 -1
- package/dist/esm/components/carousel.js +1 -1
- package/dist/esm/components/carousel.js.map +1 -1
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.d.ts +5 -4
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/esm/stories/HeroBanner.stories.js +2 -2
- package/dist/esm/stories/HeroBanner.stories.js.map +3 -3
- package/dist/esm/stories/container.stories.js +2 -2
- package/dist/esm/stories/container.stories.js.map +2 -2
- package/dist/esm/stories/faq.stories.js.map +2 -2
- package/dist/esm/stories/graphic.stories.js +1 -1
- package/dist/esm/stories/graphic.stories.js.map +2 -2
- package/dist/esm/stories/graphicAttractionBlock.stories.js +1 -1
- package/dist/esm/stories/graphicAttractionBlock.stories.js.map +2 -2
- package/package.json +3 -2
- package/style.css +6 -6
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)d(o,l,{get:e[l],enumerable:!0})},g=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!r.call(o,s)&&s!==l&&d(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var c=o=>g(d({},"__esModule",{value:!0}),o);var f={};b(f,{TextModal:()=>n});module.exports=c(f);var t=require("react/jsx-runtime"),x=require("../../components/dialog.js"),a=require("../../components/index.js"),u=require("../../helpers/index.js");const n=o=>{const{textVisible:e,extension:l,onCloseModal:i}=o;return(0,t.jsx)(x.Dialog,{open:e,onOpenChange:()=>i(),children:(0,t.jsx)(x.DialogContent,{className:"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:(0,t.jsxs)("div",{className:"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg",children:[(0,t.jsx)("div",{className:"md-tablet:flex-1 min-h-[260px] w-full",children:(0,t.jsx)(a.Picture,{source:`${l?.textPcImg?.url||""} , ${l?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),(0,t.jsx)("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:(0,t.jsx)(a.Text,{html:l?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),(0,t.jsx)("div",{onClick:()=>i(),className:"absolute right-4 top-4 cursor-pointer",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("g",{"clip-path":"url(#clip0_2548_10038)",children:(0,t.jsx)("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),(0,t.jsxs)("div",{className:"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#
|
|
1
|
+
"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)d(o,l,{get:e[l],enumerable:!0})},g=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!r.call(o,s)&&s!==l&&d(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var c=o=>g(d({},"__esModule",{value:!0}),o);var f={};b(f,{TextModal:()=>n});module.exports=c(f);var t=require("react/jsx-runtime"),x=require("../../components/dialog.js"),a=require("../../components/index.js"),u=require("../../helpers/index.js");const n=o=>{const{textVisible:e,extension:l,onCloseModal:i}=o;return(0,t.jsx)(x.Dialog,{open:e,onOpenChange:()=>i(),children:(0,t.jsx)(x.DialogContent,{className:"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:(0,t.jsxs)("div",{className:"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg",children:[(0,t.jsx)("div",{className:"md-tablet:flex-1 min-h-[260px] w-full",children:(0,t.jsx)(a.Picture,{source:`${l?.textPcImg?.url||""} , ${l?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),(0,t.jsx)("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:(0,t.jsx)(a.Text,{html:l?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),(0,t.jsx)("div",{onClick:()=>i(),className:"absolute right-4 top-4 cursor-pointer",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("g",{"clip-path":"url(#clip0_2548_10038)",children:(0,t.jsx)("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),(0,t.jsxs)("div",{className:"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#080A0F]",children:[(0,t.jsx)(a.Text,{html:l?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),(0,t.jsx)("br",{}),(0,t.jsx)(a.Text,{html:l?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/TextModal/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg\">\n <div className=\"md-tablet:flex-1 min-h-[260px] w-full\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#
|
|
4
|
+
"sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg\">\n <div className=\"md-tablet:flex-1 min-h-[260px] w-full\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#080A0F]\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
|
|
5
5
|
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,yJACvB,oBAAC,OAAI,UAAU,kFACb,oBAAC,OAAI,UAAU,wCACb,mBAAC,WACC,OAAQ,GAAGD,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,KACA,OAAC,OAAI,UAAU,yDACb,mBAAC,QAAK,KAAMA,GAAW,UAAW,UAAU,yDAAyD,EACvG,KACA,OAAC,OAAI,QAAS,IAAMC,EAAa,EAAG,UAAU,wCAC5C,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,KAAE,YAAU,yBACX,mBAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,KACA,QAAC,OAAI,UAAU,iFACb,oBAAC,QAAK,KAAMD,GAAW,KAAM,UAAU,mDAAmD,KAC1F,OAAC,OAAG,KACJ,OAAC,QAAK,KAAMA,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
|
|
6
6
|
"names": ["TextModal_exports", "__export", "TextModal", "__toCommonJS", "import_jsx_runtime", "import_dialog", "import_components", "import_helpers", "props", "textVisible", "extension", "onCloseModal"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var r=Object.create;var e=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var s=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty;var h=(C,H)=>{for(var t in H)e(C,t,{get:H[t],enumerable:!0})},M=(C,H,t,i)=>{if(H&&typeof H=="object"||typeof H=="function")for(let L of o(H))!a.call(C,L)&&L!==t&&e(C,L,{get:()=>H[L],enumerable:!(i=l(H,L))||i.enumerable});return C};var f=(C,H,t)=>(t=C!=null?r(s(C)):{},M(H||!C||!C.__esModule?e(t,"default",{value:C,enumerable:!0}):t,C)),m=C=>M(e({},"__esModule",{value:!0}),C);var w={};h(w,{default:()=>v});module.exports=m(w);var V=require("react/jsx-runtime"),g=require("react"),Z=require("./container.js"),n=f(require("./link.js"));const d=({href:C})=>(0,V.jsx)(n.default,{href:C,asChild:!C,children:(0,V.jsx)("div",{className:"relative z-[46] h-[30px]",children:(0,V.jsx)(Z.Container,{childClassName:"flex !bg-[#
|
|
1
|
+
"use strict";var r=Object.create;var e=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var s=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty;var h=(C,H)=>{for(var t in H)e(C,t,{get:H[t],enumerable:!0})},M=(C,H,t,i)=>{if(H&&typeof H=="object"||typeof H=="function")for(let L of o(H))!a.call(C,L)&&L!==t&&e(C,L,{get:()=>H[L],enumerable:!(i=l(H,L))||i.enumerable});return C};var f=(C,H,t)=>(t=C!=null?r(s(C)):{},M(H||!C||!C.__esModule?e(t,"default",{value:C,enumerable:!0}):t,C)),m=C=>M(e({},"__esModule",{value:!0}),C);var w={};h(w,{default:()=>v});module.exports=m(w);var V=require("react/jsx-runtime"),g=require("react"),Z=require("./container.js"),n=f(require("./link.js"));const d=({href:C})=>(0,V.jsx)(n.default,{href:C,asChild:!C,children:(0,V.jsx)("div",{className:"relative z-[46] h-[30px]",children:(0,V.jsx)(Z.Container,{childClassName:"flex !bg-[#080A0F] items-center justify-end",className:"h-full",children:(0,V.jsx)(p,{})})})}),p=C=>(0,V.jsxs)("svg",{width:"148",height:"10",viewBox:"0 0 148 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",...C,children:[(0,V.jsx)("path",{d:"M88.5391 1.66872C90.8392 1.6688 92.7041 3.53461 92.7041 5.83474C92.7039 8.13468 90.839 9.9997 88.5391 9.99977C86.239 9.99977 84.3733 8.13473 84.373 5.83474C84.373 3.53456 86.2389 1.66872 88.5391 1.66872ZM106.479 1.66872C107.484 1.66872 108.407 2.02531 109.127 2.61892L109.477 1.86208H110.645V9.79958H109.477L109.13 9.0486C108.409 9.64225 107.486 9.99977 106.479 9.99977C104.179 9.99954 102.314 8.13458 102.313 5.83474C102.313 3.53471 104.179 1.66896 106.479 1.66872ZM126.684 1.66872C128.984 1.66872 130.849 3.53456 130.849 5.83474C130.848 8.13473 128.984 9.99977 126.684 9.99977C124.384 9.99972 122.519 8.13469 122.519 5.83474C122.519 3.5346 124.383 1.66878 126.684 1.66872ZM144.748 1.66188C146.602 1.66198 147.794 2.66292 147.823 4.20778H146.278C146.249 3.44345 145.631 3.04577 144.719 3.04567C143.806 3.04567 143.247 3.429 143.247 4.0027C143.247 4.7082 144.07 4.85598 145.026 5.0027L145.025 5.00173C146.365 5.23788 147.998 5.48784 147.998 7.44509C147.998 8.98988 146.716 9.99001 144.775 9.99001C142.834 9.98986 141.568 8.93061 141.524 7.28298H143.128C143.172 8.12086 143.878 8.54763 144.835 8.54763C145.703 8.5475 146.38 8.17982 146.38 7.51833C146.38 6.76851 145.527 6.5909 144.556 6.42946C143.232 6.20932 141.673 5.90104 141.673 4.0613C141.673 2.6337 142.893 1.66188 144.748 1.66188ZM115.1 1.85427H117.434V3.24685H115.102V6.85524C115.102 7.79295 115.614 8.32097 116.582 8.32106H117.478V9.80251L116.275 9.8406C114.545 9.84058 113.474 8.76932 113.474 7.02419V3.24685H112.285V2.93532L114.577 0.000751495H115.1V1.85427ZM63.7627 9.79958H62.1367V-0.000225067H63.7627V9.79958ZM97.5566 7.32302L100.108 1.85427H101.884L98.1787 9.79958H96.9355L93.2305 1.85427H95.0059L97.5566 7.32302ZM120.852 9.79958H119.226V3.24587H120.852V9.79958ZM67.8779 2.61892C68.6117 2.02787 69.5403 1.67165 70.5557 1.67165H70.5566C72.1803 1.67165 73.498 2.98838 73.498 4.61208V9.7986H71.8711V4.96462C71.8711 4.00413 71.0923 3.22462 70.1318 3.22438C68.9018 3.22438 67.9045 4.221 67.9043 5.45095V9.7986H66.2725V1.67165H67.4404L67.8779 2.61892ZM77.3252 2.61892C78.059 2.02789 78.9876 1.67165 80.0029 1.67165H80.0039C81.6276 1.67165 82.9443 2.98838 82.9443 4.61208V9.7986H81.3184V4.96462C81.3184 4.00399 80.5388 3.22438 79.5781 3.22438C78.3483 3.2246 77.3518 4.22113 77.3516 5.45095V9.7986H75.7197V1.67165H76.8877L77.3252 2.61892ZM133.85 1.67165L134.287 2.61892C135.021 2.02792 135.95 1.67173 136.965 1.67165H136.967C138.59 1.67181 139.907 2.98848 139.907 4.61208V9.7986H138.28V4.96462C138.28 4.00403 137.502 3.22446 136.541 3.22438C135.311 3.22438 134.315 4.221 134.314 5.45095V9.7986H132.683V1.67165H133.85ZM88.5391 3.29567C87.1368 3.29567 86 4.43248 86 5.83474C86.0002 7.23681 87.1369 8.3738 88.5391 8.3738C89.9411 8.37372 91.0779 7.23676 91.0781 5.83474C91.0781 4.43253 89.9412 3.29575 88.5391 3.29567ZM106.479 3.29567C105.076 3.29591 103.94 4.43263 103.94 5.83474C103.941 7.23666 105.077 8.37356 106.479 8.3738C107.881 8.3738 109.017 7.23681 109.018 5.83474C109.018 4.43248 107.881 3.29567 106.479 3.29567ZM126.684 3.29567C125.281 3.29573 124.145 4.43252 124.145 5.83474C124.145 7.23677 125.282 8.37374 126.684 8.3738C128.086 8.3738 129.222 7.23681 129.223 5.83474C129.223 4.43248 128.086 3.29567 126.684 3.29567ZM120.852 1.84938H119.226V-0.000225067H120.852V1.84938Z",fill:"white"}),(0,V.jsx)("path",{d:"M11.124 10.0002H8.73438L5.63672 3.35569L2.53809 10.0002H0.148438L4.81152 0.000221252H6.46191L11.124 10.0002ZM20.3516 6.48264V0.000221252H22.5371V9.99924H20.3516L15.2871 3.51682V9.99924H13.1016V0.000221252H15.2871L20.3516 6.48264ZM27.209 9.99924H25.0234V0.000221252H27.209V9.99924ZM30.3037 4.99924L34.21 9.99924H31.4619L27.5586 4.99632L31.4619 0.000221252H34.21L30.3037 4.99924ZM44.6006 2.00413H38.1348V3.99827H43.2354V6.0012H38.1348V7.99534H44.6006V9.99924H35.9492V0.000221252H44.6006V2.00413ZM52.3105 0.000221252C54.2297 0.000274701 55.7852 1.55571 55.7852 3.47483C55.7851 5.0072 54.7924 6.30365 53.416 6.76585L55.9414 9.99729H53.1934L49.29 4.99534H52.2998C53.1392 4.99513 53.8203 4.31423 53.8203 3.47483C53.8203 2.63538 53.1392 1.95453 52.2998 1.95432H48.7715V9.99924H46.5859V0.000221252H52.3105Z",fill:"white"})]});var v=d;
|
|
2
2
|
//# sourceMappingURL=board.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/board.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Container } from './container.js'\nimport Link from './link.js'\n\n/**\n * Board - \u54C1\u724C\u6807\u8BC6\u680F\n *\n * @description Anker Innovations\u54C1\u724C\u6807\u8BC6\u680F\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u663E\u793A\u516C\u53F8Logo\u548C\u54C1\u724C\u4FE1\u606F\n */\nconst Board = ({ href }: { href?: string }) => {\n return (\n <Link href={href} asChild={!href}>\n <div className=\"relative z-[46] h-[30px]\">\n <Container childClassName=\"flex !bg-[#
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Container } from './container.js'\nimport Link from './link.js'\n\n/**\n * Board - \u54C1\u724C\u6807\u8BC6\u680F\n *\n * @description Anker Innovations\u54C1\u724C\u6807\u8BC6\u680F\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u663E\u793A\u516C\u53F8Logo\u548C\u54C1\u724C\u4FE1\u606F\n */\nconst Board = ({ href }: { href?: string }) => {\n return (\n <Link href={href} asChild={!href}>\n <div className=\"relative z-[46] h-[30px]\">\n <Container childClassName=\"flex !bg-[#080A0F] items-center justify-end\" className=\"h-full\">\n <AnkerInnovations />\n </Container>\n </div>\n </Link>\n )\n}\n\nconst AnkerInnovations = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"148\" height=\"10\" viewBox=\"0 0 148 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n <path\n d=\"M88.5391 1.66872C90.8392 1.6688 92.7041 3.53461 92.7041 5.83474C92.7039 8.13468 90.839 9.9997 88.5391 9.99977C86.239 9.99977 84.3733 8.13473 84.373 5.83474C84.373 3.53456 86.2389 1.66872 88.5391 1.66872ZM106.479 1.66872C107.484 1.66872 108.407 2.02531 109.127 2.61892L109.477 1.86208H110.645V9.79958H109.477L109.13 9.0486C108.409 9.64225 107.486 9.99977 106.479 9.99977C104.179 9.99954 102.314 8.13458 102.313 5.83474C102.313 3.53471 104.179 1.66896 106.479 1.66872ZM126.684 1.66872C128.984 1.66872 130.849 3.53456 130.849 5.83474C130.848 8.13473 128.984 9.99977 126.684 9.99977C124.384 9.99972 122.519 8.13469 122.519 5.83474C122.519 3.5346 124.383 1.66878 126.684 1.66872ZM144.748 1.66188C146.602 1.66198 147.794 2.66292 147.823 4.20778H146.278C146.249 3.44345 145.631 3.04577 144.719 3.04567C143.806 3.04567 143.247 3.429 143.247 4.0027C143.247 4.7082 144.07 4.85598 145.026 5.0027L145.025 5.00173C146.365 5.23788 147.998 5.48784 147.998 7.44509C147.998 8.98988 146.716 9.99001 144.775 9.99001C142.834 9.98986 141.568 8.93061 141.524 7.28298H143.128C143.172 8.12086 143.878 8.54763 144.835 8.54763C145.703 8.5475 146.38 8.17982 146.38 7.51833C146.38 6.76851 145.527 6.5909 144.556 6.42946C143.232 6.20932 141.673 5.90104 141.673 4.0613C141.673 2.6337 142.893 1.66188 144.748 1.66188ZM115.1 1.85427H117.434V3.24685H115.102V6.85524C115.102 7.79295 115.614 8.32097 116.582 8.32106H117.478V9.80251L116.275 9.8406C114.545 9.84058 113.474 8.76932 113.474 7.02419V3.24685H112.285V2.93532L114.577 0.000751495H115.1V1.85427ZM63.7627 9.79958H62.1367V-0.000225067H63.7627V9.79958ZM97.5566 7.32302L100.108 1.85427H101.884L98.1787 9.79958H96.9355L93.2305 1.85427H95.0059L97.5566 7.32302ZM120.852 9.79958H119.226V3.24587H120.852V9.79958ZM67.8779 2.61892C68.6117 2.02787 69.5403 1.67165 70.5557 1.67165H70.5566C72.1803 1.67165 73.498 2.98838 73.498 4.61208V9.7986H71.8711V4.96462C71.8711 4.00413 71.0923 3.22462 70.1318 3.22438C68.9018 3.22438 67.9045 4.221 67.9043 5.45095V9.7986H66.2725V1.67165H67.4404L67.8779 2.61892ZM77.3252 2.61892C78.059 2.02789 78.9876 1.67165 80.0029 1.67165H80.0039C81.6276 1.67165 82.9443 2.98838 82.9443 4.61208V9.7986H81.3184V4.96462C81.3184 4.00399 80.5388 3.22438 79.5781 3.22438C78.3483 3.2246 77.3518 4.22113 77.3516 5.45095V9.7986H75.7197V1.67165H76.8877L77.3252 2.61892ZM133.85 1.67165L134.287 2.61892C135.021 2.02792 135.95 1.67173 136.965 1.67165H136.967C138.59 1.67181 139.907 2.98848 139.907 4.61208V9.7986H138.28V4.96462C138.28 4.00403 137.502 3.22446 136.541 3.22438C135.311 3.22438 134.315 4.221 134.314 5.45095V9.7986H132.683V1.67165H133.85ZM88.5391 3.29567C87.1368 3.29567 86 4.43248 86 5.83474C86.0002 7.23681 87.1369 8.3738 88.5391 8.3738C89.9411 8.37372 91.0779 7.23676 91.0781 5.83474C91.0781 4.43253 89.9412 3.29575 88.5391 3.29567ZM106.479 3.29567C105.076 3.29591 103.94 4.43263 103.94 5.83474C103.941 7.23666 105.077 8.37356 106.479 8.3738C107.881 8.3738 109.017 7.23681 109.018 5.83474C109.018 4.43248 107.881 3.29567 106.479 3.29567ZM126.684 3.29567C125.281 3.29573 124.145 4.43252 124.145 5.83474C124.145 7.23677 125.282 8.37374 126.684 8.3738C128.086 8.3738 129.222 7.23681 129.223 5.83474C129.223 4.43248 128.086 3.29567 126.684 3.29567ZM120.852 1.84938H119.226V-0.000225067H120.852V1.84938Z\"\n fill=\"white\"\n />\n <path\n d=\"M11.124 10.0002H8.73438L5.63672 3.35569L2.53809 10.0002H0.148438L4.81152 0.000221252H6.46191L11.124 10.0002ZM20.3516 6.48264V0.000221252H22.5371V9.99924H20.3516L15.2871 3.51682V9.99924H13.1016V0.000221252H15.2871L20.3516 6.48264ZM27.209 9.99924H25.0234V0.000221252H27.209V9.99924ZM30.3037 4.99924L34.21 9.99924H31.4619L27.5586 4.99632L31.4619 0.000221252H34.21L30.3037 4.99924ZM44.6006 2.00413H38.1348V3.99827H43.2354V6.0012H38.1348V7.99534H44.6006V9.99924H35.9492V0.000221252H44.6006V2.00413ZM52.3105 0.000221252C54.2297 0.000274701 55.7852 1.55571 55.7852 3.47483C55.7851 5.0072 54.7924 6.30365 53.416 6.76585L55.9414 9.99729H53.1934L49.29 4.99534H52.2998C53.1392 4.99513 53.8203 4.31423 53.8203 3.47483C53.8203 2.63538 53.1392 1.95453 52.2998 1.95432H48.7715V9.99924H46.5859V0.000221252H52.3105Z\"\n fill=\"white\"\n />\n </svg>\n )\n}\n\nexport default Board\n"],
|
|
5
5
|
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAcU,IAAAI,EAAA,6BAdVC,EAAkB,iBAClBC,EAA0B,0BAC1BC,EAAiB,wBAOjB,MAAMC,EAAQ,CAAC,CAAE,KAAAC,CAAK,OAElB,OAAC,EAAAC,QAAA,CAAK,KAAMD,EAAM,QAAS,CAACA,EAC1B,mBAAC,OAAI,UAAU,2BACb,mBAAC,aAAU,eAAe,8CAA8C,UAAU,SAChF,mBAACE,EAAA,EAAiB,EACpB,EACF,EACF,EAIEA,EAAoBC,MAEtB,QAAC,OAAI,MAAM,MAAM,OAAO,KAAK,QAAQ,aAAa,KAAK,OAAO,MAAM,6BAA8B,GAAGA,EACnG,oBAAC,QACC,EAAE,uqGACF,KAAK,QACP,KACA,OAAC,QACC,EAAE,iyBACF,KAAK,QACP,GACF,EAIJ,IAAOV,EAAQM",
|
|
6
6
|
"names": ["board_exports", "__export", "board_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_container", "import_link", "Board", "href", "Link", "AnkerInnovations", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var O=Object.create;var y=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var o in t)y(e,o,{get:t[o],enumerable:!0})},D=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of W(t))!j.call(e,a)&&a!==o&&y(e,a,{get:()=>t[a],enumerable:!(s=Z(t,a))||s.enumerable});return e};var P=(e,t,o)=>(o=e!=null?O(_(e)):{},D(t||!e||!e.__esModule?y(o,"default",{value:e,enumerable:!0}):o,e)),G=e=>D(y({},"__esModule",{value:!0}),e);var Q={};q(Q,{Carousel:()=>N,CarouselContent:()=>T,CarouselItem:()=>E,CarouselNext:()=>g,CarouselPrevious:()=>S,DotButton:()=>k});module.exports=G(Q);var l=require("react/jsx-runtime"),r=P(require("react")),R=P(require("embla-carousel-react")),p=require("../helpers/index.js"),h=P(require("./button.js"));const J=(e,t)=>{const[o,s]=r.useState(0),[a,C]=r.useState([]),f=r.useCallback(m=>{e&&(e.scrollTo(m),t&&t(e))},[e,t]),i=r.useCallback(m=>{C(m.scrollSnapList())},[]),u=r.useCallback(m=>{s(m.selectedScrollSnap())},[]);return r.useEffect(()=>{e&&(i(e),u(e),e.on("reInit",i).on("reInit",u).on("select",u))},[e,i,u]),{selectedIndex:o,scrollSnaps:a,onDotButtonClick:f}},k=e=>{const{children:t,...o}=e;return(0,l.jsx)("button",{type:"button",...o,children:t})},L=r.createContext(null);function v(){const e=r.useContext(L);if(!e)throw new Error("useCarousel must be used within a <Carousel />");return e}const N=r.forwardRef(({orientation:e="horizontal",showNavigation:t=!1,navigationPosition:o="inner",opts:s,setApi:a,plugins:C,className:f,children:i,...u},m)=>{const[B,n]=(0,R.default)({...s,axis:e==="horizontal"?"x":"y"},C),[M,z]=r.useState(!1),[H,I]=r.useState(!1),{selectedIndex:U,scrollSnaps:F,onDotButtonClick:K}=J(n),d=r.useCallback(c=>{c&&(z(c.canScrollPrev()),I(c.canScrollNext()))},[]),x=r.useCallback(()=>{n?.scrollPrev()},[n]),b=r.useCallback(()=>{n?.scrollNext()},[n]),A=r.useCallback(c=>{c.key==="ArrowLeft"?(c.preventDefault(),x()):c.key==="ArrowRight"&&(c.preventDefault(),b())},[x,b]);return r.useEffect(()=>{!n||!a||a(n)},[n,a]),r.useEffect(()=>{if(n)return d(n),n.on("reInit",d),n.on("select",d),()=>{n?.off("select",d)}},[n,d]),(0,l.jsx)(L.Provider,{value:{carouselRef:B,api:n,opts:s,orientation:e||(s?.axis==="y"?"vertical":"horizontal"),scrollPrev:x,scrollNext:b,canScrollPrev:M,canScrollNext:H},children:(0,l.jsxs)("div",{ref:m,onKeyDownCapture:A,className:(0,p.cn)("relative",f),role:"region","aria-roledescription":"carousel",...u,children:[i,t&&(0,l.jsx)("div",{className:(0,p.cn)("absolute left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]",{"laptop:bottom-[40px] bottom-[24px]":o==="inner","laptop:-bottom-[40px] -bottom-[24px]":o==="outter"}),children:F.map((c,w)=>(0,l.jsx)(k,{onClick:()=>K(w),className:(0,p.cn)("laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]",{"bg-[#080A0F]":w===U})},w))})]})})});N.displayName="Carousel";const T=r.forwardRef(({className:e,...t},o)=>{const{carouselRef:s,orientation:a}=v();return(0,l.jsx)("div",{ref:s,className:"overflow-hidden",children:(0,l.jsx)("div",{ref:o,className:(0,p.cn)("flex",a==="horizontal"?"-ml-4":"-mt-4 flex-col",e),...t})})});T.displayName="CarouselContent";const E=r.forwardRef(({className:e,...t},o)=>{const{orientation:s}=v();return(0,l.jsx)("div",{ref:o,role:"group","aria-roledescription":"slide",className:(0,p.cn)("w-0 shrink-0 grow-0 basis-full",s==="horizontal"?"pl-4":"pt-4",e),...t})});E.displayName="CarouselItem";const S=r.forwardRef(({className:e,variant:t="secondary",size:o="icon",children:s,...a},C)=>{const{orientation:f,scrollPrev:i,canScrollPrev:u}=v();return(0,l.jsxs)(h.default,{ref:C,variant:t,size:o,className:(0,p.cn)("absolute size-8 rounded-full",f==="horizontal"?"-left-12 top-1/2 -translate-y-1/2":"-top-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:i,...a,children:[s||(0,l.jsxs)("svg",{width:"58",height:"58",viewBox:"0 0 58 58",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("circle",{opacity:"0.2",cx:"29",cy:"29",r:"29",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)",fill:"#1D1D1F"}),(0,l.jsx)("path",{d:"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z",fill:"white"})]}),(0,l.jsx)("span",{className:"sr-only",children:"Previous slide"})]})});S.displayName="CarouselPrevious";const g=r.forwardRef(({className:e,variant:t="secondary",size:o="icon",children:s,...a},C)=>{const{orientation:f,scrollNext:i,canScrollNext:u}=v();return(0,l.jsxs)(h.default,{ref:C,variant:t,size:o,className:(0,p.cn)("absolute size-8 rounded-full",f==="horizontal"?"-right-12 top-1/2 -translate-y-1/2":"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",e),disabled:!u,onClick:i,...a,children:[s||(0,l.jsxs)("svg",{width:"58",height:"58",viewBox:"0 0 58 58",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,l.jsx)("circle",{opacity:"0.2",cx:"29",cy:"29",r:"29",transform:"rotate(-180 29 29)",fill:"#1D1D1F"}),(0,l.jsx)("path",{d:"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z",fill:"white"})]}),(0,l.jsx)("span",{className:"sr-only",children:"Next slide"})]})});g.displayName="CarouselNext";
|
|
2
2
|
//# sourceMappingURL=carousel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/carousel.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { EmblaCarouselType } from 'embla-carousel'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\n\nimport { cn } from '../helpers/index.js'\nimport Button from './button.js'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n /**\n * \u662F\u5426\u663E\u793A\u5BFC\u822A\u70B9\n */\n showNavigation?: boolean\n /**\n * \u5BFC\u822A\u70B9\u4F4D\u7F6E default inner\n */\n navigationPosition?: 'inner' | 'outter'\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: 'horizontal' | 'vertical'\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n api: ReturnType<typeof useEmblaCarousel>[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\ntype UseDotButtonType = {\n selectedIndex: number\n scrollSnaps: number[]\n onDotButtonClick: (index: number) => void\n}\n\nconst useDotButton = (\n emblaApi: EmblaCarouselType | undefined,\n onButtonClick?: (emblaApi: EmblaCarouselType) => void\n): UseDotButtonType => {\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n const onDotButtonClick = React.useCallback(\n (index: number) => {\n if (!emblaApi) return\n emblaApi.scrollTo(index)\n if (onButtonClick) onButtonClick(emblaApi)\n },\n [emblaApi, onButtonClick]\n )\n\n const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {\n setScrollSnaps(emblaApi.scrollSnapList())\n }, [])\n\n const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {\n setSelectedIndex(emblaApi.selectedScrollSnap())\n }, [])\n\n React.useEffect(() => {\n if (!emblaApi) return\n\n onInit(emblaApi)\n onSelect(emblaApi)\n\n emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)\n }, [emblaApi, onInit, onSelect])\n\n return {\n selectedIndex,\n scrollSnaps,\n onDotButtonClick,\n }\n}\n\ntype PropType = React.ComponentPropsWithRef<'button'>\n\nexport const DotButton: React.FC<PropType> = props => {\n const { children, ...restProps } = props\n\n return (\n <button type=\"button\" {...restProps}>\n {children}\n </button>\n )\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error('useCarousel must be used within a <Carousel />')\n }\n\n return context\n}\n\nconst Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(\n (\n {\n orientation = 'horizontal',\n showNavigation = false,\n navigationPosition = 'inner',\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(api)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) {\n return\n }\n\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === 'ArrowRight') {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) {\n return\n }\n\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n onSelect(api)\n api.on('reInit', onSelect)\n api.on('select', onSelect)\n\n return () => {\n api?.off('select', onSelect)\n }\n }, [api, onSelect])\n\n return (\n <CarouselContext.Provider\n value={{\n carouselRef,\n api: api,\n opts,\n orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n scrollPrev,\n scrollNext,\n canScrollPrev,\n canScrollNext,\n }}\n >\n <div\n ref={ref}\n onKeyDownCapture={handleKeyDown}\n className={cn('relative', className)}\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...props}\n >\n {children}\n {showNavigation && (\n <div\n className={cn('absolute left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]', {\n 'laptop:bottom-[40px] bottom-[24px]': navigationPosition === 'inner',\n 'laptop:-bottom-[40px] -bottom-[24px]': navigationPosition === 'outter',\n })}\n >\n {scrollSnaps.map((_, index) => (\n <DotButton\n key={index}\n onClick={() => onDotButtonClick(index)}\n className={cn('laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]', {\n 'bg-[#1D1D1F]': index === selectedIndex,\n })}\n />\n ))}\n </div>\n )}\n </div>\n </CarouselContext.Provider>\n )\n }\n)\nCarousel.displayName = 'Carousel'\n\nconst CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n <div ref={carouselRef} className=\"overflow-hidden\">\n <div\n ref={ref}\n className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}\n {...props}\n />\n </div>\n )\n }\n)\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-roledescription=\"slide\"\n className={cn('w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n {...props}\n />\n )\n }\n)\nCarouselItem.displayName = 'CarouselItem'\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n <Button\n ref={ref}\n variant={variant}\n size={size}\n className={cn(\n 'absolute size-8 rounded-full',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n className\n )}\n disabled={!canScrollPrev}\n onClick={scrollPrev}\n {...props}\n >\n {children ? (\n children\n ) : (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n opacity=\"0.2\"\n cx=\"29\"\n cy=\"29\"\n r=\"29\"\n transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)\"\n fill=\"#1D1D1F\"\n />\n <path\n d=\"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z\"\n fill=\"white\"\n />\n </svg>\n )}\n <span className=\"sr-only\">Previous slide</span>\n </Button>\n )\n }\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n <Button\n ref={ref}\n variant={variant}\n size={size}\n className={cn(\n 'absolute size-8 rounded-full',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n className\n )}\n disabled={!canScrollNext}\n onClick={scrollNext}\n {...props}\n >\n {children ? (\n children\n ) : (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle opacity=\"0.2\" cx=\"29\" cy=\"29\" r=\"29\" transform=\"rotate(-180 29 29)\" fill=\"#1D1D1F\" />\n <path\n d=\"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z\"\n fill=\"white\"\n />\n </svg>\n )}\n <span className=\"sr-only\">Next slide</span>\n </Button>\n )\n }\n)\nCarouselNext.displayName = 'CarouselNext'\n\nexport { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }\n"],
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { EmblaCarouselType } from 'embla-carousel'\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\n\nimport { cn } from '../helpers/index.js'\nimport Button from './button.js'\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n /**\n * \u662F\u5426\u663E\u793A\u5BFC\u822A\u70B9\n */\n showNavigation?: boolean\n /**\n * \u5BFC\u822A\u70B9\u4F4D\u7F6E default inner\n */\n navigationPosition?: 'inner' | 'outter'\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: 'horizontal' | 'vertical'\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n api: ReturnType<typeof useEmblaCarousel>[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\ntype UseDotButtonType = {\n selectedIndex: number\n scrollSnaps: number[]\n onDotButtonClick: (index: number) => void\n}\n\nconst useDotButton = (\n emblaApi: EmblaCarouselType | undefined,\n onButtonClick?: (emblaApi: EmblaCarouselType) => void\n): UseDotButtonType => {\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n const onDotButtonClick = React.useCallback(\n (index: number) => {\n if (!emblaApi) return\n emblaApi.scrollTo(index)\n if (onButtonClick) onButtonClick(emblaApi)\n },\n [emblaApi, onButtonClick]\n )\n\n const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {\n setScrollSnaps(emblaApi.scrollSnapList())\n }, [])\n\n const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {\n setSelectedIndex(emblaApi.selectedScrollSnap())\n }, [])\n\n React.useEffect(() => {\n if (!emblaApi) return\n\n onInit(emblaApi)\n onSelect(emblaApi)\n\n emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)\n }, [emblaApi, onInit, onSelect])\n\n return {\n selectedIndex,\n scrollSnaps,\n onDotButtonClick,\n }\n}\n\ntype PropType = React.ComponentPropsWithRef<'button'>\n\nexport const DotButton: React.FC<PropType> = props => {\n const { children, ...restProps } = props\n\n return (\n <button type=\"button\" {...restProps}>\n {children}\n </button>\n )\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error('useCarousel must be used within a <Carousel />')\n }\n\n return context\n}\n\nconst Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(\n (\n {\n orientation = 'horizontal',\n showNavigation = false,\n navigationPosition = 'inner',\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(api)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) {\n return\n }\n\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === 'ArrowRight') {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) {\n return\n }\n\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n onSelect(api)\n api.on('reInit', onSelect)\n api.on('select', onSelect)\n\n return () => {\n api?.off('select', onSelect)\n }\n }, [api, onSelect])\n\n return (\n <CarouselContext.Provider\n value={{\n carouselRef,\n api: api,\n opts,\n orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n scrollPrev,\n scrollNext,\n canScrollPrev,\n canScrollNext,\n }}\n >\n <div\n ref={ref}\n onKeyDownCapture={handleKeyDown}\n className={cn('relative', className)}\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...props}\n >\n {children}\n {showNavigation && (\n <div\n className={cn('absolute left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]', {\n 'laptop:bottom-[40px] bottom-[24px]': navigationPosition === 'inner',\n 'laptop:-bottom-[40px] -bottom-[24px]': navigationPosition === 'outter',\n })}\n >\n {scrollSnaps.map((_, index) => (\n <DotButton\n key={index}\n onClick={() => onDotButtonClick(index)}\n className={cn('laptop:w-[30px] h-[3px] w-[16px] bg-[#86868C]', {\n 'bg-[#080A0F]': index === selectedIndex,\n })}\n />\n ))}\n </div>\n )}\n </div>\n </CarouselContext.Provider>\n )\n }\n)\nCarousel.displayName = 'Carousel'\n\nconst CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n <div ref={carouselRef} className=\"overflow-hidden\">\n <div\n ref={ref}\n className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}\n {...props}\n />\n </div>\n )\n }\n)\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-roledescription=\"slide\"\n className={cn('w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n {...props}\n />\n )\n }\n)\nCarouselItem.displayName = 'CarouselItem'\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n <Button\n ref={ref}\n variant={variant}\n size={size}\n className={cn(\n 'absolute size-8 rounded-full',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n className\n )}\n disabled={!canScrollPrev}\n onClick={scrollPrev}\n {...props}\n >\n {children ? (\n children\n ) : (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n opacity=\"0.2\"\n cx=\"29\"\n cy=\"29\"\n r=\"29\"\n transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)\"\n fill=\"#1D1D1F\"\n />\n <path\n d=\"M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z\"\n fill=\"white\"\n />\n </svg>\n )}\n <span className=\"sr-only\">Previous slide</span>\n </Button>\n )\n }\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n <Button\n ref={ref}\n variant={variant}\n size={size}\n className={cn(\n 'absolute size-8 rounded-full',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n className\n )}\n disabled={!canScrollNext}\n onClick={scrollNext}\n {...props}\n >\n {children ? (\n children\n ) : (\n <svg width=\"58\" height=\"58\" viewBox=\"0 0 58 58\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle opacity=\"0.2\" cx=\"29\" cy=\"29\" r=\"29\" transform=\"rotate(-180 29 29)\" fill=\"#1D1D1F\" />\n <path\n d=\"M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z\"\n fill=\"white\"\n />\n </svg>\n )}\n <span className=\"sr-only\">Next slide</span>\n </Button>\n )\n }\n)\nCarouselNext.displayName = 'CarouselNext'\n\nexport { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["carousel_exports", "__export", "Carousel", "CarouselContent", "CarouselItem", "CarouselNext", "CarouselPrevious", "DotButton", "__toCommonJS", "import_jsx_runtime", "React", "import_embla_carousel_react", "import_helpers", "import_button", "useDotButton", "emblaApi", "onButtonClick", "selectedIndex", "setSelectedIndex", "scrollSnaps", "setScrollSnaps", "onDotButtonClick", "index", "onInit", "onSelect", "props", "children", "restProps", "CarouselContext", "useCarousel", "context", "orientation", "showNavigation", "navigationPosition", "opts", "setApi", "plugins", "className", "ref", "carouselRef", "api", "useEmblaCarousel", "canScrollPrev", "setCanScrollPrev", "canScrollNext", "setCanScrollNext", "scrollPrev", "scrollNext", "handleKeyDown", "event", "_", "variant", "size", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var N=Object.create;var p=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var a in e)p(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of W(e))!k.call(t,s)&&s!==a&&p(t,s,{get:()=>e[s],enumerable:!(o=w(e,s))||o.enumerable});return t};var R=(t,e,a)=>(a=t!=null?N(E(t)):{},y(e||!t||!t.__esModule?p(a,"default",{value:t,enumerable:!0}):a,t)),
|
|
1
|
+
"use strict";"use client";var N=Object.create;var p=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var a in e)p(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of W(e))!k.call(t,s)&&s!==a&&p(t,s,{get:()=>e[s],enumerable:!(o=w(e,s))||o.enumerable});return t};var R=(t,e,a)=>(a=t!=null?N(E(t)):{},y(e||!t||!t.__esModule?p(a,"default",{value:t,enumerable:!0}):a,t)),A=t=>y(p({},"__esModule",{value:!0}),t);var V={};q(V,{Tabs:()=>g,TabsContent:()=>T,TabsList:()=>u,TabsTrigger:()=>h});module.exports=A(V);var r=require("react/jsx-runtime"),n=R(require("react")),l=require("../helpers/index.js"),i=R(require("@radix-ui/react-tabs")),b=require("class-variance-authority");const d=n.createContext({align:"left",shape:"square"}),g=n.forwardRef(({children:t,align:e="left",shape:a="square",...o},s)=>(0,r.jsx)(i.Root,{ref:s,...o,children:(0,r.jsx)(d.Provider,{value:{align:e,shape:a},children:t})}));g.displayName="Tabs";const F=(0,b.cva)("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),S=(0,b.cva)("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),u=n.forwardRef(({className:t,...e},a)=>{const{align:o,shape:s}=n.useContext(d);return(0,r.jsx)(i.List,{ref:a,className:(0,l.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",F({align:o,shape:s}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});u.displayName=i.List.displayName;const h=n.forwardRef(({className:t,onClick:e,...a},o)=>{const{shape:s}=n.useContext(d),v=f=>{e?.(f);const m=f?.currentTarget,c=f?.currentTarget?.parentElement;if(m&&c){const x=m.offsetLeft,P=m.offsetWidth,C=c.offsetWidth,L=x-C/2+P/2;c.scrollTo({left:L,behavior:"smooth"})}};return(0,r.jsx)(i.Trigger,{ref:o,className:(0,l.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,S({shape:s})),onClick:v,...a})});h.displayName=i.Trigger.displayName;const T=n.forwardRef(({className:t,...e},a)=>(0,r.jsx)(i.Content,{ref:a,className:(0,l.cn)(t),...e}));T.displayName=i.Content.displayName;
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: Shape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: Shape\n }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n variants: {\n align: {\n left: 'justify-left',\n center: 'justify-center',\n right: 'justify-end',\n },\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n align: 'left',\n shape: 'square',\n },\n})\n\nconst tabsTriggerVariants = cva('', {\n variants: {\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'square',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({\n align: alignFromParent,\n shape: shapeFromParent,\n }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = (e?.currentTarget as any)?.parentElement\n if (tabElement && container) {\n const tabLeft = (tabElement as any).offsetLeft\n const tabWidth = (tabElement as any).offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n // e.currentTarget.scrollIntoView({\n // behavior: 'smooth',\n // inline: 'center',\n // block: 'nearest',\n // })\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: Shape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: Shape\n }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n variants: {\n align: {\n left: 'justify-left',\n center: 'justify-center',\n right: 'justify-end',\n },\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n align: 'left',\n shape: 'square',\n },\n})\n\nconst tabsTriggerVariants = cva('', {\n variants: {\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'square',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({\n align: alignFromParent,\n shape: shapeFromParent,\n }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = (e?.currentTarget as any)?.parentElement\n if (tabElement && container) {\n const tabLeft = (tabElement as any).offsetLeft\n const tabWidth = (tabElement as any).offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n // e.currentTarget.scrollIntoView({\n // behavior: 'smooth',\n // inline: 'center',\n // block: 'nearest',\n // })\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
|
|
5
5
|
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,gBAAAC,EAAA,aAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAN,GAyBI,IAAAO,EAAA,6BAvBJC,EAAuB,oBACvBC,EAAmB,+BAEnBC,EAA+B,mCAC/BC,EAAoB,oCAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKN,EAAOM,EAAM,WAMjB,CAAC,CAAE,SAAAK,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,OAC3D,OAACP,EAAc,KAAd,CAAmB,IAAKO,EAAM,GAAGD,EAChC,mBAACJ,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAE,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDX,EAAK,YAAc,OAEnB,MAAMgB,KAAmB,OAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKC,KAAsB,OAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKf,EAAWI,EAAM,WAGrB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOI,EAAiB,MAAOC,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC1F,SACE,OAACF,EAAc,KAAd,CACC,IAAKO,EACL,aAAW,MACT,4DACAC,EAAiB,CACf,MAAOG,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGJ,EACN,CAEJ,CAAC,EACDZ,EAAS,YAAcM,EAAc,KAAK,YAE1C,MAAML,EAAcG,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,QAAAG,EAAS,GAAGP,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOK,CAAgB,EAAId,EAAM,WAAWI,CAAc,EAC5DY,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAaF,GAAG,eAAuB,cAC7C,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAWF,EAAmB,WAC9BG,EAAYH,EAAmB,YAC/BI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,SACE,OAACrB,EAAc,QAAd,CACC,IAAKO,EACL,aAAW,MACT,8PACAG,EACAD,EAAoB,CAClB,MAAOG,CACT,CAAC,CACH,EACA,QAASE,EACR,GAAGR,EACN,CAEJ,CAAC,EACDX,EAAY,YAAcK,EAAc,QAAQ,YAEhD,MAAMP,EAAcK,EAAM,WAGxB,CAAC,CAAE,UAAAY,EAAW,GAAGJ,CAAM,EAAGC,OAAQ,OAACP,EAAc,QAAd,CAAsB,IAAKO,EAAK,aAAW,MAAGG,CAAS,EAAI,GAAGJ,EAAO,CAAE,EAC5Gb,EAAY,YAAcO,EAAc,QAAQ",
|
|
6
6
|
"names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "TabListContext", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alignFromParent", "shapeFromParent", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo"]
|
|
7
7
|
}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ScrollLoadVideoProps {
|
|
2
3
|
src: string;
|
|
3
4
|
poster?: string;
|
|
4
|
-
alt?: string;
|
|
5
5
|
className?: string;
|
|
6
|
-
videoWrapperClassName?: string;
|
|
7
6
|
videoClassName?: string;
|
|
8
7
|
autoplay?: boolean;
|
|
9
8
|
muted?: boolean;
|
|
10
9
|
loop?: boolean;
|
|
11
10
|
controls?: boolean;
|
|
12
11
|
playsInline?: boolean;
|
|
12
|
+
videoRef?: React.RefObject<HTMLVideoElement>;
|
|
13
13
|
[key: string]: any;
|
|
14
|
-
}
|
|
14
|
+
}
|
|
15
|
+
declare const ScrollLoadVideo: ({ src, poster, className, videoClassName, autoplay, muted, loop, controls, playsInline, videoRef, ...attr }: ScrollLoadVideoProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
export default ScrollLoadVideo;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var u=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var w=(o,e)=>{for(var n in e)u(o,n,{get:e[n],enumerable:!0})},H=(o,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of N(e))!T.call(o,r)&&r!==n&&u(o,r,{get:()=>e[r],enumerable:!(l=M(e,r))||l.enumerable});return o};var k=o=>H(u({},"__esModule",{value:!0}),o);var P={};w(P,{default:()=>O});module.exports=k(P);var f=require("react/jsx-runtime"),t=require("react"),d=require("../helpers/utils.js");const z=({src:o,poster:e,className:n="",videoClassName:l="",autoplay:r=!0,muted:v=!0,loop:b=!0,controls:L=!1,playsInline:R=!0,videoRef:g,...V})=>{const[a,h]=(0,t.useState)(!1),E=(0,t.useRef)(null),m=(0,t.useRef)(null),s=g||E;return(0,t.useEffect)(()=>{const p=new IntersectionObserver(y=>{y.forEach(S=>{if(S.isIntersecting){if(a||h(!0),r&&s.current){const i=s.current;i.muted=!0,i.currentTime=0,i.play().catch(I=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",I)})}}else s.current&&s.current.pause()})},{threshold:.1,rootMargin:"50px"}),c=m.current;return c&&p.observe(c),()=>{c&&p.unobserve(c)}},[r,s,a]),(0,f.jsx)("div",{ref:m,className:(0,d.cn)("relative size-full",n),children:(0,f.jsx)("video",{ref:s,src:a?o:void 0,poster:e,className:(0,d.cn)("size-full object-cover",l),loop:b,muted:v,controls:L,playsInline:R,preload:"metadata",...V})})};var O=z;
|
|
2
2
|
//# sourceMappingURL=ScrollLoadVideo.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useState
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n src: string\n poster?: string\n className?: string\n videoClassName?: string\n autoplay?: boolean\n muted?: boolean\n loop?: boolean\n controls?: boolean\n playsInline?: boolean\n videoRef?: React.RefObject<HTMLVideoElement>\n [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n src,\n poster,\n className = '',\n videoClassName = '',\n autoplay = true,\n muted = true,\n loop = true,\n controls = false,\n playsInline = true,\n videoRef,\n ...attr\n}: ScrollLoadVideoProps) => {\n const [shouldLoad, setShouldLoad] = useState(false)\n const internalVideoRef = useRef<HTMLVideoElement>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n\n const currentVideoRef = videoRef || internalVideoRef\n\n // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n useEffect(() => {\n const observer = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n if (!shouldLoad) {\n setShouldLoad(true)\n }\n\n // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n if (autoplay && currentVideoRef.current) {\n const video = currentVideoRef.current\n video.muted = true\n video.currentTime = 0 // \u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u4ECE\u5934\u64AD\u653E\n video.play().catch((error: unknown) => {\n console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n })\n }\n } else if (currentVideoRef.current) {\n // \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u89C6\u9891\n currentVideoRef.current.pause()\n }\n })\n },\n {\n threshold: 0.1, // \u5F53 10% \u7684\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n rootMargin: '50px', // \u63D0\u524D 50px \u89E6\u53D1\n }\n )\n\n const currentElement = containerRef.current\n if (currentElement) {\n observer.observe(currentElement)\n }\n\n return () => {\n if (currentElement) {\n observer.unobserve(currentElement)\n }\n }\n }, [autoplay, currentVideoRef, shouldLoad])\n\n return (\n <div ref={containerRef} className={cn('relative size-full', className)}>\n {/* \u89C6\u9891 */}\n <video\n ref={currentVideoRef}\n src={shouldLoad ? src : undefined} // \u53EA\u6709\u5728\u9700\u8981\u65F6\u624D\u8BBE\u7F6E src\n poster={poster}\n className={cn('size-full object-cover', videoClassName)}\n loop={loop}\n muted={muted}\n controls={controls}\n playsInline={playsInline}\n preload=\"metadata\" // \u5B8C\u5168\u4E0D\u9884\u52A0\u8F7D\n {...attr}\n />\n </div>\n )\n}\n\nexport default ScrollLoadVideo\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmFM,IAAAI,EAAA,6BAnFNC,EAAmD,iBACnDC,EAAmB,+BAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5CC,KAAmB,UAAyB,IAAI,EAChDC,KAAe,UAAuB,IAAI,EAE1CC,EAAkBN,GAAYI,EAGpC,sBAAU,IAAM,CACd,MAAMG,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,EAIhBR,GAAYW,EAAgB,QAAS,CACvC,MAAMI,EAAQJ,EAAgB,QAC9BI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOC,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSL,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAW,GACX,WAAY,MACd,CACF,EAEMM,EAAiBP,EAAa,QACpC,OAAIO,GACFL,EAAS,QAAQK,CAAc,EAG1B,IAAM,CACPA,GACFL,EAAS,UAAUK,CAAc,CAErC,CACF,EAAG,CAACjB,EAAUW,EAAiBJ,CAAU,CAAC,KAGxC,OAAC,OAAI,IAAKG,EAAc,aAAW,MAAG,qBAAsBZ,CAAS,EAEnE,mBAAC,SACC,IAAKa,EACL,IAAKJ,EAAaX,EAAM,OACxB,OAAQC,EACR,aAAW,MAAG,yBAA0BE,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACP,GAAGE,EACN,EACF,CAEJ,EAEA,IAAOhB,EAAQK",
|
|
6
|
+
"names": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "ScrollLoadVideo", "src", "poster", "className", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "shouldLoad", "setShouldLoad", "internalVideoRef", "containerRef", "currentVideoRef", "observer", "entries", "entry", "video", "error", "currentElement"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var b=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,o)=>{for(var r in o)n(a,r,{get:o[r],enumerable:!0})},s=(a,o,r,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of h(o))!y.call(a,l)&&l!==r&&n(a,l,{get:()=>o[l],enumerable:!(d=u(o,l))||d.enumerable});return a};var x=(a,o,r)=>(r=a!=null?b(g(a)):{},s(o||!a||!a.__esModule?n(r,"default",{value:a,enumerable:!0}):r,a)),f=a=>s(n({},"__esModule",{value:!0}),a);var S={};v(S,{DarkTheme:()=>c,LightTheme:()=>p,MultiBanner:()=>P,ScrollableBackgroundVideo:()=>L,WithVideoModal:()=>B,WithYoutubeVideo:()=>T,WithoutSecondaryButton:()=>w,default:()=>N});module.exports=f(S);var e=require("react/jsx-runtime"),I=require("react"),m=x(require("../biz-components/HeroBanner/HeroBanner.js"));const k={title:"Biz-Components/HeroBanner",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
|
|
3
3
|
|
|
4
4
|
### \u7279\u70B9
|
|
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
|
|
|
7
7
|
- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
|
|
8
8
|
- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
|
|
9
9
|
- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
|
|
10
|
-
`}}},tags:["autodocs"]};var A=x;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",D="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",l="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",u={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},g={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},mobileImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},B=()=>(0,i.jsxs)("div",{className:"flex flex-col",children:[(0,i.jsx)(m.default,{data:{...u.args.data,size:"sm"}}),(0,i.jsx)(m.default,{data:{...g.args.data,size:"sm"}})]}),w={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},S={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},W={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",playVideoButton:{text:"Shop Now"},videoConfig:{videoUrl:"https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4",setVideoUrl:e=>{console.log("setVideoUrl",e)}},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};
|
|
10
|
+
`}}},tags:["autodocs"]};var N=k;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",U="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",i="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",p={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},c={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:i,alt:"dark background",thumbnailURL:i,mimeType:"image/jpeg"},mobileImage:{url:i,alt:"dark background",thumbnailURL:i,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},P=()=>(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(m.default,{data:{...p.args.data,size:"sm"}}),(0,e.jsx)(m.default,{data:{...c.args.data,size:"sm"},className:"mt-[8px]"})]}),w={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},B={args:{data:{title:"Experience Anker Innovation",subtitle:"Watch our latest product demo and discover the future of charging technology",pcImage:{url:t,alt:"tech background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"tech background mobile",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now",link:"/shop"},secondaryButton:{text:"Learn More",link:"/learn-more",isShowPlayVideoButton:!0,playVideoButtonText:"Watch Demo",playIcon:!0,videoUrl:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"product demo video",thumbnailURL:t,mimeType:"video/mp4"}},caption:[{title:"Anker Prime 240W GaN Desktop Charger"},{title:"Anker PowerCore 27,650mAh Power Bank"},{title:"Anker Wireless Charging Station"}]}}},T={args:{data:{title:"Anker Prime Series",subtitle:"See our Prime series in action. Experience the power that drives innovation.",pcImage:{url:t,alt:"anker products",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:t,alt:"anker products pad",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"anker products mobile",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Buy Now",link:"/buy"},secondaryButton:{text:"Explore",link:"/explore",isShowPlayVideoButton:!0,playVideoButtonText:"Watch on YouTube",youtubeId:"dQw4w9WgXcQ"},caption:[{title:"Prime 240W Desktop Charger"},{title:"Prime 27,650mAh Power Bank"},{title:"Prime 100W Wireless Charger"}]}}},L=()=>(0,e.jsxs)("div",{className:"min-h-[500vh]",children:[(0,e.jsx)(m.default,{data:{theme:"dark",title:"Powered by Innovation",subtitle:"Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.",pcImage:{url:t,alt:"fallback background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"fallback background mobile",thumbnailURL:t,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video desktop",thumbnailURL:t,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video tablet",thumbnailURL:t,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"background video mobile",thumbnailURL:t,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"First Video",link:"/first"},secondaryButton:{text:"Learn More",link:"/learn"},caption:[{title:"IntersectionObserver Controlled"},{title:"Auto Play on Viewport Entry"},{title:"Restart from Beginning"}]}}),(0,e.jsx)("div",{className:"bg-gradient-to-b from-gray-900 to-black py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto max-w-4xl px-4",children:[(0,e.jsx)("h2",{className:"mb-8 text-center text-4xl font-bold",children:"IntersectionObserver \u89C6\u9891\u63A7\u5236"}),(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u667A\u80FD\u89C6\u9891\u64AD\u653E"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528 IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002"})]}),(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002"})]})]})]})}),(0,e.jsx)(m.default,{data:{title:"Second Video Banner",subtitle:"This is the second video to test multiple banners with IntersectionObserver.",pcImage:{url:i,alt:"second banner background",thumbnailURL:i,mimeType:"image/jpeg"},mobileImage:{url:i,alt:"second banner mobile",thumbnailURL:i,mimeType:"image/jpeg"},pcVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4",alt:"second video desktop",thumbnailURL:i,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"second video tablet",thumbnailURL:i,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"second video mobile",thumbnailURL:i,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"Second Video",link:"/second"},secondaryButton:{text:"Explore More",link:"/explore"},caption:[{title:"Independent Video Control"},{title:"Pause When Out of View"},{title:"Resource Efficient"}]}}),(0,e.jsx)("div",{className:"bg-gradient-to-b from-black to-gray-900 py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto max-w-4xl px-4",children:[(0,e.jsx)("h2",{className:"mb-8 text-center text-4xl font-bold",children:"\u591A\u89C6\u9891\u7BA1\u7406"}),(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u72EC\u7ACB\u63A7\u5236"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002 \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002"})]}),(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u7528\u6237\u4F53\u9A8C"}),(0,e.jsx)("p",{className:"leading-relaxed text-gray-300",children:"\u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002 \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002"})]})]})]})}),(0,e.jsx)(m.default,{data:{title:"Third Video Experience",subtitle:"Final banner to demonstrate seamless video management across multiple sections.",pcImage:{url:t,alt:"third banner background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"third banner mobile",thumbnailURL:t,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video desktop",thumbnailURL:t,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video tablet",thumbnailURL:t,mimeType:"video/mp4"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4",alt:"third video mobile",thumbnailURL:t,mimeType:"video/mp4"},theme:"dark",isShowVideo:!0,primaryButton:{text:"Third Video",link:"/third"},secondaryButton:{text:"Complete Test",link:"/complete"},caption:[{title:"Seamless Performance"},{title:"Multiple Video Management"},{title:"Optimized for All Devices"}]}}),(0,e.jsx)("div",{className:"bg-black py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto px-4 text-center",children:[(0,e.jsx)("h2",{className:"mb-4 text-3xl font-bold",children:"IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210"}),(0,e.jsx)("p",{className:"mb-8 text-gray-400",children:"\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C"}),(0,e.jsxs)("div",{className:"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3",children:[(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u667A\u80FD\u64AD\u653E"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C"})]}),(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u4ECE\u5934\u64AD\u653E"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB"})]}),(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528"})]})]})]})})]});
|
|
11
11
|
//# sourceMappingURL=HeroBanner.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/HeroBanner.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n endDate: '2025-11-15T03:32:00.000Z',\n endDate_tz: 'America/Sao_Paulo',\n dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPadImage: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithPlayButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: 'https://placehold.co/1920x930?text=1920x930',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: 'https://placehold.co/768x660?text=768x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: 'https://placehold.co/390x660?text=390x660',\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n playVideoButton: {\n text: 'Shop Now',\n },\n videoConfig: {\n videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n setVideoUrl: (v: string) => {\n console.log('setVideoUrl', v)\n },\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,gBAAAC,EAAA,
|
|
6
|
-
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n title: 'Biz-Components/HeroBanner',\n component: HeroBanner,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n `,\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n args: {\n data: {\n title: 'Anker Laptop Power',\n subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n blockLink: '/this-is-block-link',\n primaryButton: {\n text: 'Shop Now',\n link: '/this-is-shop-now-link',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/this-is-learn-more-link',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n endDate: '2025-11-15T03:32:00.000Z',\n endDate_tz: 'America/Sao_Paulo',\n dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n title: 'Power Your Life',\n subtitle:\n 'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n pcImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'dark background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n },\n secondaryButton: {\n text: 'Learn More',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const MultiBanner = () => {\n return (\n <div className=\"flex flex-col\">\n {/* @ts-ignore */}\n <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n {/* @ts-ignore */}\n <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} className=\"mt-[8px]\" />\n </div>\n )\n}\n\nexport const WithoutSecondaryButton: Story = {\n args: {\n data: {\n title: 'Future of Charging',\n subtitle:\n 'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n pcImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'default background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Shop Now',\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n ],\n },\n },\n}\n\nexport const WithVideoModal: Story = {\n args: {\n data: {\n title: 'Experience Anker Innovation',\n subtitle: 'Watch our latest product demo and discover the future of charging technology',\n pcImage: {\n url: defaultBackground,\n alt: 'tech background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'tech background mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'dark',\n primaryButton: {\n text: 'Shop Now',\n link: '/shop',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/learn-more',\n isShowPlayVideoButton: true,\n playVideoButtonText: 'Watch Demo',\n playIcon: true,\n videoUrl: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'product demo video',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n },\n caption: [\n { title: 'Anker Prime 240W GaN Desktop Charger' },\n { title: 'Anker PowerCore 27,650mAh Power Bank' },\n { title: 'Anker Wireless Charging Station' },\n ],\n },\n },\n}\n\nexport const WithYoutubeVideo: Story = {\n args: {\n data: {\n title: 'Anker Prime Series',\n subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n pcImage: {\n url: defaultBackground,\n alt: 'anker products',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n padImage: {\n url: defaultBackground,\n alt: 'anker products pad',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'anker products mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n theme: 'light',\n primaryButton: {\n text: 'Buy Now',\n link: '/buy',\n },\n secondaryButton: {\n text: 'Explore',\n link: '/explore',\n isShowPlayVideoButton: true,\n playVideoButtonText: 'Watch on YouTube',\n youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n },\n caption: [\n { title: 'Prime 240W Desktop Charger' },\n { title: 'Prime 27,650mAh Power Bank' },\n { title: 'Prime 100W Wireless Charger' },\n ],\n },\n },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n return (\n <div className=\"min-h-[500vh]\">\n {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n theme: 'dark',\n title: 'Powered by Innovation',\n subtitle:\n 'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n pcImage: {\n url: defaultBackground,\n alt: 'fallback background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'fallback background mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'background video desktop',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'background video tablet',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n alt: 'background video mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n isShowVideo: true,\n primaryButton: {\n text: 'First Video',\n link: '/first',\n },\n secondaryButton: {\n text: 'Learn More',\n link: '/learn',\n },\n caption: [\n { title: 'IntersectionObserver Controlled' },\n { title: 'Auto Play on Viewport Entry' },\n { title: 'Restart from Beginning' },\n ],\n }}\n />\n\n {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n <div className=\"container mx-auto max-w-4xl px-4\">\n <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n <div className=\"space-y-8\">\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n </p>\n </div>\n\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n title: 'Second Video Banner',\n subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n pcImage: {\n url: darkBackground,\n alt: 'second banner background',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: darkBackground,\n alt: 'second banner mobile',\n thumbnailURL: darkBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n alt: 'second video desktop',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n alt: 'second video tablet',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n alt: 'second video mobile',\n thumbnailURL: darkBackground,\n mimeType: 'video/mp4',\n },\n isShowVideo: true,\n primaryButton: {\n text: 'Second Video',\n link: '/second',\n },\n secondaryButton: {\n text: 'Explore More',\n link: '/explore',\n },\n caption: [\n { title: 'Independent Video Control' },\n { title: 'Pause When Out of View' },\n { title: 'Resource Efficient' },\n ],\n }}\n />\n\n {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n <div className=\"container mx-auto max-w-4xl px-4\">\n <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n <div className=\"space-y-8\">\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n </p>\n </div>\n\n <div className=\"rounded-lg bg-gray-800 p-8\">\n <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n <p className=\"leading-relaxed text-gray-300\">\n \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n </p>\n </div>\n </div>\n </div>\n </div>\n\n {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n <HeroBanner\n data={{\n title: 'Third Video Experience',\n subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n pcImage: {\n url: defaultBackground,\n alt: 'third banner background',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n mobileImage: {\n url: defaultBackground,\n alt: 'third banner mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'image/jpeg',\n },\n pcVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n alt: 'third video desktop',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n padVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n alt: 'third video tablet',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n mobileVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n alt: 'third video mobile',\n thumbnailURL: defaultBackground,\n mimeType: 'video/mp4',\n },\n theme: 'dark',\n isShowVideo: true,\n primaryButton: {\n text: 'Third Video',\n link: '/third',\n },\n secondaryButton: {\n text: 'Complete Test',\n link: '/complete',\n },\n caption: [\n { title: 'Seamless Performance' },\n { title: 'Multiple Video Management' },\n { title: 'Optimized for All Devices' },\n ],\n }}\n />\n\n {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n <div className=\"bg-black py-20 text-white\">\n <div className=\"container mx-auto px-4 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n </div>\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n </div>\n <div className=\"rounded border border-gray-700 p-6\">\n <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,eAAAC,EAAA,gBAAAC,EAAA,8BAAAC,EAAA,mBAAAC,EAAA,qBAAAC,EAAA,2BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAV,GAkHI,IAAAW,EAAA,6BAjHJC,EAAkB,iBAClBC,EAAuB,yDAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQK,EAGf,MAAME,EACJ,gJAEIC,EACJ,gJAEIC,EACJ,2GAEWf,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKa,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,UAAW,sBACX,cAAe,CACb,KAAM,WACN,KAAM,wBACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,0BACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,EACA,QAAS,2BACT,WAAY,oBACZ,WAAY,8DACd,CACF,CACF,EAEad,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKgB,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEad,EAAc,OAEvB,QAAC,OAAI,UAAU,gBAEb,oBAAC,EAAAW,QAAA,CAAW,KAAM,CAAE,GAAGZ,EAAY,KAAM,KAAM,KAAM,IAAK,EAAG,KAE7D,OAAC,EAAAY,QAAA,CAAW,KAAM,CAAE,GAAGb,EAAW,KAAM,KAAM,KAAM,IAAK,EAAG,UAAU,WAAW,GACnF,EAISM,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKQ,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaV,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,8BACP,SAAU,+EACV,QAAS,CACP,IAAKU,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,yBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,cACN,sBAAuB,GACvB,oBAAqB,aACrB,SAAU,GACV,SAAU,CACR,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,CACF,EACA,QAAS,CACP,CAAE,MAAO,sCAAuC,EAChD,CAAE,MAAO,sCAAuC,EAChD,CAAE,MAAO,iCAAkC,CAC7C,CACF,CACF,CACF,EAEaT,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,+EACV,QAAS,CACP,IAAKS,EACL,IAAK,iBACL,aAAcA,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,wBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACN,KAAM,MACR,EACA,gBAAiB,CACf,KAAM,UACN,KAAM,WACN,sBAAuB,GACvB,oBAAqB,mBACrB,UAAW,aACb,EACA,QAAS,CACP,CAAE,MAAO,4BAA6B,EACtC,CAAE,MAAO,4BAA6B,EACtC,CAAE,MAAO,6BAA8B,CACzC,CACF,CACF,CACF,EAEaX,EAA4B,OAErC,QAAC,OAAI,UAAU,gBAEb,oBAAC,EAAAU,QAAA,CACC,KAAM,CACJ,MAAO,OACP,MAAO,wBACP,SACE,qHACF,QAAS,CACP,IAAKC,EACL,IAAK,sBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,6BACL,aAAcA,EACd,SAAU,YACZ,EACA,QAAS,CACP,IAAK,4EACL,IAAK,2BACL,aAAcA,EACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,0BACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,mEACL,IAAK,0BACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,GACb,cAAe,CACb,KAAM,cACN,KAAM,QACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,QAAS,CACP,CAAE,MAAO,iCAAkC,EAC3C,CAAE,MAAO,6BAA8B,EACvC,CAAE,MAAO,wBAAyB,CACpC,CACF,EACF,KAGA,OAAC,OAAI,UAAU,2DACb,oBAAC,OAAI,UAAU,mCACb,oBAAC,MAAG,UAAU,sCAAsC,yDAAyB,KAC7E,QAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,6BACb,oBAAC,MAAG,UAAU,8BAA8B,gDAAM,KAClD,OAAC,KAAE,UAAU,gCAAgC,oZAG7C,GACF,KAEA,QAAC,OAAI,UAAU,6BACb,oBAAC,MAAG,UAAU,8BAA8B,oCAAI,KAChD,OAAC,KAAE,UAAU,gCAAgC,qYAG7C,GACF,GACF,GACF,EACF,KAGA,OAAC,EAAAD,QAAA,CACC,KAAM,CACJ,MAAO,sBACP,SAAU,+EACV,QAAS,CACP,IAAKG,EACL,IAAK,2BACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,uBACL,aAAcA,EACd,SAAU,YACZ,EACA,QAAS,CACP,IAAK,oEACL,IAAK,uBACL,aAAcA,EACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,sBACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,mEACL,IAAK,sBACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,GACb,cAAe,CACb,KAAM,eACN,KAAM,SACR,EACA,gBAAiB,CACf,KAAM,eACN,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,2BAA4B,EACrC,CAAE,MAAO,wBAAyB,EAClC,CAAE,MAAO,oBAAqB,CAChC,CACF,EACF,KAGA,OAAC,OAAI,UAAU,2DACb,oBAAC,OAAI,UAAU,mCACb,oBAAC,MAAG,UAAU,sCAAsC,0CAAK,KACzD,QAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,6BACb,oBAAC,MAAG,UAAU,8BAA8B,oCAAI,KAChD,OAAC,KAAE,UAAU,gCAAgC,mSAG7C,GACF,KAEA,QAAC,OAAI,UAAU,6BACb,oBAAC,MAAG,UAAU,8BAA8B,oCAAI,KAChD,OAAC,KAAE,UAAU,gCAAgC,qUAG7C,GACF,GACF,GACF,EACF,KAGA,OAAC,EAAAH,QAAA,CACC,KAAM,CACJ,MAAO,yBACP,SAAU,kFACV,QAAS,CACP,IAAKC,EACL,IAAK,0BACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,sBACL,aAAcA,EACd,SAAU,YACZ,EACA,QAAS,CACP,IAAK,4EACL,IAAK,sBACL,aAAcA,EACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,EACA,MAAO,OACP,YAAa,GACb,cAAe,CACb,KAAM,cACN,KAAM,QACR,EACA,gBAAiB,CACf,KAAM,gBACN,KAAM,WACR,EACA,QAAS,CACP,CAAE,MAAO,sBAAuB,EAChC,CAAE,MAAO,2BAA4B,EACrC,CAAE,MAAO,2BAA4B,CACvC,CACF,EACF,KAGA,OAAC,OAAI,UAAU,4BACb,oBAAC,OAAI,UAAU,qCACb,oBAAC,MAAG,UAAU,0BAA0B,yDAAyB,KACjE,OAAC,KAAE,UAAU,qBAAqB,0IAAqB,KACvD,QAAC,OAAI,UAAU,0DACb,qBAAC,OAAI,UAAU,qCACb,oBAAC,MAAG,UAAU,6BAA6B,oCAAI,KAC/C,OAAC,KAAE,UAAU,wBAAwB,sGAAe,GACtD,KACA,QAAC,OAAI,UAAU,qCACb,oBAAC,MAAG,UAAU,6BAA6B,oCAAI,KAC/C,OAAC,KAAE,UAAU,wBAAwB,gGAAc,GACrD,KACA,QAAC,OAAI,UAAU,qCACb,oBAAC,MAAG,UAAU,6BAA6B,oCAAI,KAC/C,OAAC,KAAE,UAAU,wBAAwB,gGAAc,GACrD,GACF,GACF,EACF,GACF",
|
|
6
|
+
"names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "ScrollableBackgroundVideo", "WithVideoModal", "WithYoutubeVideo", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(t,a)=>{for(var r in a)p(t,r,{get:a[r],enumerable:!0})},c=(t,a,r,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of i(a))!m.call(t,s)&&s!==r&&p(t,s,{get:()=>a[s],enumerable:!(d=l(a,s))||d.enumerable});return t};var g=t=>c(p({},"__esModule",{value:!0}),t);var v={};n(v,{Basic:()=>N,NestedContent:()=>h,ResponsivePadding:()=>y,WithPaddingAndBackground:()=>u,default:()=>b});module.exports=g(v);var e=require("react/jsx-runtime"),C=require("react"),o=require("../components/index.js")
|
|
1
|
+
"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(t,a)=>{for(var r in a)p(t,r,{get:a[r],enumerable:!0})},c=(t,a,r,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of i(a))!m.call(t,s)&&s!==r&&p(t,s,{get:()=>a[s],enumerable:!(d=l(a,s))||d.enumerable});return t};var g=t=>c(p({},"__esModule",{value:!0}),t);var v={};n(v,{Basic:()=>N,NestedContent:()=>h,ResponsivePadding:()=>y,WithPaddingAndBackground:()=>u,default:()=>b});module.exports=g(v);var e=require("react/jsx-runtime"),C=require("react"),o=require("../components/index.js");const x={title:"Layout/Container",component:o.Container,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
2
|
Container \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002
|
|
3
3
|
|
|
4
4
|
### \u5B9E\u73B0\u7EC6\u8282
|