@anker-in/headless-ui 1.0.26-alpha.1762494080693 → 1.0.26-alpha.1762495505276
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/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/cjs/biz-components/Ksp/index.d.ts +5 -4
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +2 -2
- package/dist/cjs/biz-components/MarqueeReview/index.js +1 -1
- package/dist/cjs/biz-components/MarqueeReview/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +1 -1
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +8 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +11 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.d.ts +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.js +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.d.ts +17 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js.map +7 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +11 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +2 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +7 -0
- package/dist/cjs/biz-components/ThreeDCarousel/index.d.ts +2 -15
- package/dist/cjs/biz-components/ThreeDCarousel/index.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/index.js.map +4 -4
- package/dist/cjs/biz-components/ThreeDCarousel/types.d.ts +24 -0
- package/dist/cjs/biz-components/ThreeDCarousel/types.js +2 -0
- package/dist/cjs/biz-components/ThreeDCarousel/types.js.map +7 -0
- package/dist/cjs/biz-components/index.d.ts +5 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/stories/MediaSceneSwitcher.stories.js +2 -0
- package/dist/cjs/stories/MediaSceneSwitcher.stories.js.map +7 -0
- package/dist/cjs/stories/ThreeDCarousel.stories.js +128 -1
- package/dist/cjs/stories/ThreeDCarousel.stories.js.map +3 -3
- package/dist/cjs/stories/ksp.stories.js +2 -2
- package/dist/cjs/stories/ksp.stories.js.map +2 -2
- package/dist/cjs/types/props.d.ts +4 -1
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/types.d.ts +1 -1
- package/dist/esm/biz-components/Ksp/index.d.ts +5 -4
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +3 -3
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +2 -2
- package/dist/esm/biz-components/MarqueeReview/index.js +1 -1
- package/dist/esm/biz-components/MarqueeReview/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +1 -1
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +8 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +11 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.d.ts +2 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.js +2 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts +17 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.js +1 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.js.map +7 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +11 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +2 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +7 -0
- package/dist/esm/biz-components/ThreeDCarousel/index.d.ts +2 -15
- package/dist/esm/biz-components/ThreeDCarousel/index.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/index.js.map +4 -4
- package/dist/esm/biz-components/ThreeDCarousel/types.d.ts +24 -0
- package/dist/esm/biz-components/ThreeDCarousel/types.js +1 -0
- package/dist/esm/biz-components/ThreeDCarousel/types.js.map +7 -0
- package/dist/esm/biz-components/index.d.ts +5 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/stories/MediaSceneSwitcher.stories.js +2 -0
- package/dist/esm/stories/MediaSceneSwitcher.stories.js.map +7 -0
- package/dist/esm/stories/ThreeDCarousel.stories.js +128 -1
- package/dist/esm/stories/ThreeDCarousel.stories.js.map +3 -3
- package/dist/esm/stories/ksp.stories.js +3 -3
- package/dist/esm/stories/ksp.stories.js.map +2 -2
- package/dist/esm/types/props.d.ts +4 -1
- package/package.json +1 -1
- package/tailwind.config.js +5 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ThreeDCarouselProps } from './types.js';
|
|
3
|
+
import 'swiper/css';
|
|
4
|
+
import 'swiper/css/navigation';
|
|
5
|
+
import 'swiper/css/pagination';
|
|
6
|
+
import 'swiper/css/effect-coverflow';
|
|
7
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ThreeDCarouselProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
8
|
+
className?: string | undefined;
|
|
9
|
+
data?: Record<string, any> | undefined;
|
|
10
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{Fragment as D,jsx as e,jsxs as o}from"react/jsx-runtime";import _,{useRef as c,useImperativeHandle as g}from"react";import{Heading as a,Picture as n,Text as p}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";import{useExposure as N}from"../../hooks/useExposure.js";import{Swiper as h,SwiperSlide as f}from"swiper/react";import{Navigation as S,EffectCoverflow as y}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const T="carousel",C="three_d_carousel",L=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),E=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),m=_.forwardRef(({data:w,className:x},v)=>{const{title:i,items:d=[]}=w,r=c(null),l=c(null);return N(l,{componentType:T,componentName:C,componentTitle:i}),g(v,()=>l.current),o("section",{ref:l,"data-ui-component-id":"ThreeDCarousel",className:u("three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden",x),children:[e(a,{as:"h1",size:4,html:i,className:"three-d-carousel__title text-left laptop:text-center"}),o("div",{className:"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block",children:[e(h,{onSwiper:t=>r.current=t,centeredSlides:!0,initialSlide:1,loop:!0,slidesPerView:"auto",loopAdditionalSlides:1,spaceBetween:0,grabCursor:!0,modules:[y,S],slideToClickedSlide:!0,className:"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,modifier:1,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,modifier:1,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,modifier:1,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,modifier:1,slideShadows:!0}}},children:d.map((t,s)=>e(f,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:b})=>o(D,{children:[e(n,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:u("three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg"),style:{filter:b?"":"brightness(50%) contrast(120%)"}}),o("div",{className:"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[e(a,{as:"h2",size:2,html:t.title}),e(p,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:e("button",{className:"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]})},s))}),o("div",{className:"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]",children:[e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:e(L,{})}),e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:e(E,{})})]})]}),e("div",{className:"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden",children:e(h,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:d.map((t,s)=>o(f,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[e(n,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg"}),o("div",{className:"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[e(a,{as:"h2",size:2,html:t.title}),e(p,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:e("button",{className:"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]},s))})})]})});m.displayName="ThreeDCarousel";var W=k(m);export{W as default};
|
|
2
|
+
//# sourceMappingURL=ThreeDCarousel.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title text-left laptop:text-center\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={1}\n loop\n slidesPerView={'auto'}\n loopAdditionalSlides={1}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch: 427,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: 427,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: 350,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: 334,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: 230,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: 286,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {items.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden\"\n >\n {({ isActive }) => (\n <>\n <Picture\n source={item.imageUrl?.url || ''}\n alt={item.imageUrl?.alt || item.title}\n className={cn('three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg')}\n style={{\n filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n }}\n />\n <div className=\"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1\">\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-description text-[14px] text-white\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n <button className=\"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold\">\n {item.buttonText}\n </button>\n </a>\n )}\n </div>\n </>\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]\">\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n\n {/* Mobile carousel */}\n <div className=\"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden\">\n <Swiper\n loop={true}\n slidesPerView={'auto'}\n spaceBetween={12}\n grabCursor\n className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n >\n <Picture\n source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n alt={item.mobImageUrl?.alt || item.title}\n className=\"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg\"\n />\n <div className=\"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1\">\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n <button className=\"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold\">\n {item.buttonText}\n </button>\n </a>\n )}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Navigation", "EffectCoverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "ref", "title", "items", "swiperRef", "boxRef", "swiper", "item", "index", "isActive", "ThreeDCarousel_default"]
|
|
7
|
+
}
|
|
@@ -1,15 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
mobImageUrl?: string;
|
|
4
|
-
title?: string;
|
|
5
|
-
description?: string;
|
|
6
|
-
}
|
|
7
|
-
interface ThreeDCarouselProps {
|
|
8
|
-
data: {
|
|
9
|
-
title?: string;
|
|
10
|
-
items: CarouselItem[];
|
|
11
|
-
};
|
|
12
|
-
className?: string;
|
|
13
|
-
}
|
|
14
|
-
export default function ThreeDCarousel({ data, className }: ThreeDCarouselProps): import("react/jsx-runtime").JSX.Element | null;
|
|
15
|
-
export {};
|
|
1
|
+
export { default } from './ThreeDCarousel.js';
|
|
2
|
+
export type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{default as o}from"./ThreeDCarousel.js";export{o as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/biz-components/ThreeDCarousel/index.
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Heading, Picture } from '../../components/index.js'\nimport { useRef, useState, useEffect, useCallback } from 'react'\nimport { cn } from '../../helpers/index.js'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\ninterface CarouselItem {\n imageUrl: string\n mobImageUrl?: string\n title?: string\n description?: string\n}\n\ninterface ThreeDCarouselProps {\n data: {\n title?: string\n items: CarouselItem[]\n }\n className?: string\n}\n\nexport default function ThreeDCarousel({ data, className }: ThreeDCarouselProps) {\n const containerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const mobileTrackRef = useRef<HTMLDivElement>(null)\n const { title, items = [] } = data\n\n const [activeIndex, setActiveIndex] = useState(1)\n const [isDragging, setIsDragging] = useState(false)\n const [startX, setStartX] = useState(0)\n const [scrollLeft, setScrollLeft] = useState(0)\n\n // \u521B\u5EFA\u5FAA\u73AF\u6570\u7EC4\uFF08\u5728\u5F00\u5934\u548C\u7ED3\u5C3E\u6DFB\u52A0\u514B\u9686\uFF09\n const extendedItems = items.length > 0 ? [items[items.length - 1], ...items, items[0]] : []\n\n // \u5904\u7406\u684C\u9762\u7AEF\u5207\u6362\n const handlePrev = useCallback(() => {\n setActiveIndex(prev => {\n const newIndex = prev - 1\n if (newIndex < 0) {\n return extendedItems.length - 2\n }\n return newIndex\n })\n }, [extendedItems.length])\n\n const handleNext = useCallback(() => {\n setActiveIndex(prev => {\n const newIndex = prev + 1\n if (newIndex >= extendedItems.length - 1) {\n return 1\n }\n return newIndex\n })\n }, [extendedItems.length])\n\n // \u5904\u7406\u684C\u9762\u7AEF\u62D6\u62FD\n const handleMouseDown = (e: React.MouseEvent) => {\n setIsDragging(true)\n setStartX(e.pageX)\n setScrollLeft(activeIndex)\n }\n\n const handleMouseMove = useCallback(\n (e: MouseEvent) => {\n if (!isDragging) return\n e.preventDefault()\n const x = e.pageX\n const walk = (startX - x) / 100 // \u8C03\u6574\u7075\u654F\u5EA6\n const newIndex = Math.round(scrollLeft + walk)\n\n if (newIndex >= 0 && newIndex < extendedItems.length) {\n setActiveIndex(newIndex)\n }\n },\n [isDragging, startX, scrollLeft, extendedItems.length]\n )\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false)\n }, [])\n\n // \u5904\u7406\u79FB\u52A8\u7AEF\u6EDA\u52A8\uFF08\u7528\u4E8E\u672A\u6765\u53EF\u80FD\u7684\u6EDA\u52A8\u6307\u793A\u5668\uFF09\n const handleMobileScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {\n // \u53EF\u4EE5\u5728\u8FD9\u91CC\u6DFB\u52A0\u6EDA\u52A8\u4F4D\u7F6E\u8FFD\u8E2A\u903B\u8F91\n }, [])\n\n // \u952E\u76D8\u4E8B\u4EF6\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'ArrowLeft') {\n handlePrev()\n } else if (e.key === 'ArrowRight') {\n handleNext()\n }\n },\n [handlePrev, handleNext]\n )\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n return () => {\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n }\n }\n }, [isDragging, handleMouseMove, handleMouseUp])\n\n useEffect(() => {\n window.addEventListener('keydown', handleKeyDown)\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [handleKeyDown])\n\n // \u8BA1\u7B97\u6BCF\u4E2A\u5361\u7247\u7684\u53D8\u6362\n const getCardStyle = (index: number) => {\n const offset = index - activeIndex\n const absOffset = Math.abs(offset)\n\n // \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u8C03\u6574\u53C2\u6570\n const isLargeDesktop = typeof window !== 'undefined' && window.innerWidth >= 1921\n const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 1441\n const isSmallDesktop = typeof window !== 'undefined' && window.innerWidth >= 1025\n\n let stretch = 427\n if (!isLargeDesktop && isDesktop) stretch = 334\n else if (!isDesktop && isSmallDesktop) stretch = 230\n else if (!isSmallDesktop) stretch = 286\n\n // \u8BA1\u7B97\u4F4D\u7F6E\n const translateX = offset * stretch\n const translateZ = absOffset === 0 ? 0 : -300 * absOffset\n const scale = absOffset === 0 ? 1 : 0.85 - absOffset * 0.1\n const opacity = absOffset === 0 ? 1 : 0.6\n const brightness = absOffset === 0 ? 100 : 50\n\n return {\n transform: `translateX(${translateX}px) translateZ(${translateZ}px) scale(${Math.max(scale, 0.5)})`,\n opacity: Math.max(opacity, 0.3),\n filter: `brightness(${brightness}%) contrast(120%)`,\n transition: isDragging ? 'none' : 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n zIndex: 100 - absOffset,\n }\n }\n\n if (!items || items.length === 0) {\n return null\n }\n\n return (\n <section className={cn('laptop:overflow-hidden w-full overflow-visible text-white', className)} ref={containerRef}>\n {title && <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center text-left\" />}\n\n {/* \u684C\u9762\u7AEF 3D \u8F6E\u64AD */}\n <div className=\"laptop:block relative mx-auto mt-[24px] hidden w-full\">\n <div className=\"relative mx-auto h-[480px] w-full overflow-visible\" style={{ perspective: '1200px' }}>\n <div\n ref={trackRef}\n className={cn(\n 'absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2',\n isDragging ? 'cursor-grabbing' : 'cursor-grab'\n )}\n style={{ transformStyle: 'preserve-3d' }}\n onMouseDown={handleMouseDown}\n >\n {extendedItems.map((item, index) => (\n <div\n key={index}\n className=\"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]\"\n style={getCardStyle(index)}\n onClick={() => index !== activeIndex && setActiveIndex(index)}\n >\n <div className=\"relative size-full\">\n <Picture source={item.imageUrl} alt={item.title || ''} className=\"size-full object-cover\" />\n <div className=\"absolute inset-0 bg-black/60\" />\n {item.title && (\n <div className=\"absolute inset-x-0 bottom-0 p-8\">\n <h3 className=\"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white\">\n {item.title}\n </h3>\n {item.description && (\n <p className=\"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white\">\n {item.description}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* \u5BFC\u822A\u6309\u94AE */}\n <div className=\"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n onClick={handlePrev}\n className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n onClick={handleNext}\n className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n </div>\n\n {/* \u79FB\u52A8\u7AEF\u6A2A\u5411\u6EDA\u52A8 */}\n <div className=\"laptop:hidden mt-[24px] block w-full\">\n <div\n ref={mobileTrackRef}\n className=\"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n onScroll={handleMobileScroll}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className=\"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg\"\n >\n <Picture\n source={item.mobImageUrl || item.imageUrl}\n alt={item.title || ''}\n className=\"size-full object-cover\"\n />\n {item.title && (\n <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6\">\n <p className=\"text-[24px] leading-[1.2] tracking-[-0.96px] text-white\">{item.title}</p>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../../src/biz-components/ThreeDCarousel/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './ThreeDCarousel.js'\nexport type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js'\n"],
|
|
5
|
+
"mappings": "AAAA,OAAS,WAAAA,MAAe",
|
|
6
|
+
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { Media } from '../../types/props';
|
|
2
|
+
export interface ThreeDCarouselItem {
|
|
3
|
+
/** 桌面端图片 */
|
|
4
|
+
imageUrl: Media | null;
|
|
5
|
+
/** 移动端图片 */
|
|
6
|
+
mobImageUrl: Media | null;
|
|
7
|
+
/** 标题 */
|
|
8
|
+
title: string;
|
|
9
|
+
/** 描述 */
|
|
10
|
+
description: string;
|
|
11
|
+
/** 按钮文本 */
|
|
12
|
+
buttonText?: string;
|
|
13
|
+
/** 按钮链接 */
|
|
14
|
+
buttonLink?: string | null;
|
|
15
|
+
}
|
|
16
|
+
export interface ThreeDCarouselProps {
|
|
17
|
+
data: {
|
|
18
|
+
title: string;
|
|
19
|
+
/** 轮播项列表 */
|
|
20
|
+
items: ThreeDCarouselItem[];
|
|
21
|
+
};
|
|
22
|
+
/** 自定义类名 */
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -80,6 +80,10 @@ export { default as ProductHero } from './ProductHero/index.js';
|
|
|
80
80
|
export type { ProductHeroProps } from './ProductHero/index.js';
|
|
81
81
|
export { default as SpecsComparison } from './SpecsComparison/index.js';
|
|
82
82
|
export type { SpecsComparisonProps, SpecsComparisonMenuItem, SpecsComparisonLeftMenuItem, } from './SpecsComparison/index.js';
|
|
83
|
+
export { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js';
|
|
84
|
+
export type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js';
|
|
85
|
+
export { default as ThreeDCarousel } from './ThreeDCarousel/index.js';
|
|
86
|
+
export type { ThreeDCarouselProps } from './ThreeDCarousel/index.js';
|
|
83
87
|
export declare const PAYLOAD_COMPONENT_MAP: {
|
|
84
88
|
'ipc-accordioncards': string;
|
|
85
89
|
'ipc-aplusdesc': string;
|
|
@@ -115,4 +119,5 @@ export declare const PAYLOAD_COMPONENT_MAP: {
|
|
|
115
119
|
'ipc-text-marquee': string;
|
|
116
120
|
'ipc-title': string;
|
|
117
121
|
'ipc-whychoose': string;
|
|
122
|
+
ksp: string;
|
|
118
123
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as i}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as c}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as P}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as S}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as I}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as G}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as k}from"./MarqueeReview/index.js";import{default as D}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as
|
|
1
|
+
import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as i}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as c}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as P}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as S}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as I}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as G}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as k}from"./MarqueeReview/index.js";import{default as D}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as K,MarqueeTextContent as O}from"./Marquee/index.js";import{default as N}from"./MultiLayoutGraphicBlock/index.js";import{default as V}from"./GraphicAttractionBlock/index.js";import{default as Y}from"./HeaderNavigation/index.js";import{default as Q}from"./FooterNavigation/index.js";import{default as X}from"./SearchPage/index.js";import{IPC_SEARCH_PAGE as $,SearchPageTabType as ee}from"./SearchPage/types.js";import{withLayout as ae}from"../shared/Styles.js";import{default as oe}from"./AiuiProvider/index.js";import{default as se}from"./Tabs/index.js";import{default as fe}from"./CreativeModule/index.js";import{default as de}from"./GraphicOverlay/index.js";import{default as le}from"./Specs/index.js";import{default as xe}from"./TabsGroup/index.js";import{default as he}from"./Listing/index.js";import{default as ye}from"./Listing/BizProductProvider.js";import{default as Me}from"./Listing/components/PurchaseBar/index.js";import{default as Ce}from"./Listing/components/PurchaseBar/ProductActions/index.js";import{default as be}from"./Listing/components/ProductCard/index.js";import{default as Be}from"./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js";import{default as qe}from"./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js";import{default as ve}from"./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js";import{default as we}from"./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js";import{default as Ae}from"./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js";import{default as We}from"./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js";import{default as Le}from"./Listing/components/ProductCard/ProductGridBox.js";import{default as Ke}from"./Listing/components/ProductCard/ProductGallery/index.js";import{default as Re}from"./Listing/components/ProductCard/ProductDetail/index.js";import{default as _e}from"./Listing/components/ProductCard/ProductSummary/index.js";import{default as ze}from"./Listing/components/ProductCard/ProductDetail/BenefitsTab";import{default as Je}from"./Listing/components/PaidShipping/index.js";import{default as Ue}from"./GraphicMore/index.js";import{default as Ze}from"./Features/index.js";import{default as er}from"./AplusDesc/index.js";import{default as ar}from"./GiftBox/index.js";import{default as or}from"./SelectStore/index.js";import{default as sr}from"./DownLoad/index.js";import{default as fr}from"./FootCharger/index.js";import{default as dr}from"./ProductCompare/index.js";import{default as lr}from"./Ksp/index.js";import{default as xr}from"./ImageTextFeature/index.js";import{default as hr}from"./FeatureCards/index.js";import{default as yr}from"./ImageWithText/index.js";import{default as Mr}from"./VideoFeature/index.js";import{default as Cr}from"./TabsWithMedia/index.js";import{default as br}from"./TabWithImage/index.js";import{default as Br}from"./FeatureShowcase/index.js";import{default as qr}from"./ProductHero/index.js";import{default as vr}from"./SpecsComparison/index.js";import{default as wr}from"./MediaSceneSwitcher/index.js";import{default as Ar}from"./ThreeDCarousel/index.js";const e={"ipc-accordioncards":"AccordionCards","ipc-aplusdesc":"AplusDesc","ipc-banner":"HeroBanner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose",ksp:"Ksp"};export{S as AccordionCards,oe as AiuiProvider,er as AplusDesc,ze as BenefitsTab,ye as BizProductProvider,t as BrandEquity,P as Category,fe as CreativeModule,sr as DownLoad,n as Evaluate,E as Faq,hr as FeatureCards,Br as FeatureShowcase,Ze as Features,fr as FootCharger,Q as FooterNavigation,ar as GiftBox,T as Graphic,V as GraphicAttractionBlock,Ue as GraphicMore,de as GraphicOverlay,Y as HeaderNavigation,g as HeroBanner,$ as IPC_SEARCH_PAGE,xr as ImageTextFeature,yr as ImageWithText,lr as Ksp,he as Listing,j as Marquee,K as MarqueeImageContent,H as MarqueeItem,k as MarqueeReview,O as MarqueeTextContent,I as MediaPlayerBase,G as MediaPlayerMulti,F as MediaPlayerSticky,wr as MediaSceneSwitcher,p as MemberEquity,N as MultiLayoutGraphicBlock,e as PAYLOAD_COMPONENT_MAP,Je as PaidShipping,Ce as ProductActions,Be as ProductBenefitsTabs,We as ProductBundle,be as ProductCard,dr as ProductCompare,Re as ProductDetail,we as ProductExchangePurchase,ve as ProductFreeGift,Ke as ProductGallery,Le as ProductGridBox,qr as ProductHero,qe as ProductHighlight,Ae as ProductOptions,_e as ProductSummary,Me as PurchaseBar,X as SearchPage,ee as SearchPageTabType,or as SelectStore,m as ShelfDisplay,i as Slogan,c as Spacer,le as Specs,vr as SpecsComparison,xe as TabGroup,br as TabWithImage,se as Tabs,Cr as TabsWithMedia,Ar as ThreeDCarousel,u as Title,Mr as VideoFeature,D as WhyChoose,ae as withLayout};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/biz-components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\nexport { default as Listing } from './Listing/index.js'\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n SpecsComparisonProps,\n SpecsComparisonMenuItem,\n SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n 'ipc-accordioncards': 'AccordionCards',\n 'ipc-aplusdesc': 'AplusDesc',\n 'ipc-banner': 'HeroBanner',\n 'ipc-brand-equity': 'BrandEquity',\n 'ipc-category': 'Category',\n 'ipc-collection-banner': 'CollectionBanner',\n 'ipc-collection-shelves': 'CollectionShelves',\n 'ipc-creativemodule': 'CreativeModule',\n 'ipc-download': 'DownLoad',\n 'ipc-evaluate': 'Evaluate',\n 'ipc-faq': 'Faq',\n 'ipc-features': 'Features',\n 'ipc-footcharger': 'FootCharger',\n 'ipc-ga-block': 'GraphicAttractionBlock',\n 'ipc-giftbox': 'GiftBox',\n 'ipc-graphic': 'Graphic',\n 'ipc-graphicmore': 'GraphicMore',\n 'ipc-graphicoverlay': 'GraphicOverlay',\n 'ipc-marquee': 'Marquee',\n 'ipc-mediaplayerbase': 'MediaPlayerBase',\n 'ipc-mediaplayermulti': 'MediaPlayerMulti',\n 'ipc-mediaplayersticky': 'MediaPlayerSticky',\n 'ipc-member-equity': 'MemberEquity',\n 'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n 'ipc-search-page-tabs': 'SearchPageBlock',\n 'ipc-selectstore': 'SelectStore',\n 'ipc-shelfdisplay': 'ShelfDisplay',\n 'ipc-slogan': 'Slogan',\n 'ipc-spacer': 'Spacer',\n 'ipc-specs': 'Specs',\n 'ipc-tabs': 'Tabs',\n 'ipc-text-marquee': 'TextMarquee',\n 'ipc-title': 'Title',\n 'ipc-whychoose': 'WhyChoose',\n
|
|
5
|
-
"mappings": "AAAA,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAkC,6BAC3C,OAAoB,WAAXA,MAAoC,+BAC7C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAgC,2BAEzC,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAAsB,iBAC/B,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qBACrE,OAAoB,WAAXH,MAA0C,qCAEnD,OAAoB,WAAXA,MAAyC,oCAElD,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA6B,wBAEtC,OAAS,mBAAAI,EAAiB,qBAAAC,OAAyB,wBAEnD,OAAS,cAAAC,OAAkB,sBAC3B,OAAoB,WAAXN,OAA+B,0BACxC,OAAoB,WAAXA,OAAuB,kBAChC,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAwB,mBACjC,OAAoB,WAAXA,OAA2B,uBACpC,OAAoB,WAAXA,OAA0B,qBACnC,OAAoB,WAAXA,OAAqC,kCAC9C,OAAoB,WAAXA,OAA8B,4CACvC,OAAoB,WAAXA,OAAiC,2DAC1C,OAAoB,WAAXA,OAA8B,4CACvC,OAAoB,WAAXA,OAAsC,8EAC/C,OAAoB,WAAXA,OAAmC,2EAC5C,OAAoB,WAAXA,OAAkC,0EAC3C,OAAoB,WAAXA,OAA0C,kFACnD,OAAoB,WAAXA,OAAiC,yEAC1C,OAAoB,WAAXA,OAAgC,wEACzC,OAAoB,WAAXA,OAAiC,qDAC1C,OAAoB,WAAXA,OAAiC,2DAC1C,OAAoB,WAAXA,OAAgC,0DACzC,OAAoB,WAAXA,OAAiC,2DAC1C,OAAoB,WAAXA,OAA8B,6DACvC,OAAoB,WAAXA,OAA+B,6CACxC,OAAoB,WAAXA,OAA8B,yBACvC,OAAoB,WAAXA,OAA2B,sBACpC,OAAoB,WAAXA,OAA4B,uBACrC,OAAoB,WAAXA,OAA0B,qBACnC,OAAoB,WAAXA,OAA8B,yBACvC,OAAoB,WAAXA,OAA2B,sBACpC,OAAoB,WAAXA,OAA8B,yBAEvC,OAAoB,WAAXA,OAAiC,4BAE1C,OAAoB,WAAXA,OAAsB,iBAE/B,OAAoB,WAAXA,OAAmC,8BAE5C,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAgC,2BAEzC,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAgC,2BAEzC,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAkC,6BAE3C,OAAoB,WAAXA,OAA8B,yBAEvC,OAAoB,WAAXA,OAAkC,
|
|
4
|
+
"sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\nexport { default as Listing } from './Listing/index.js'\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n SpecsComparisonProps,\n SpecsComparisonMenuItem,\n SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\nexport { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js'\nexport type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js'\nexport { default as ThreeDCarousel } from './ThreeDCarousel/index.js'\nexport type { ThreeDCarouselProps } from './ThreeDCarousel/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n 'ipc-accordioncards': 'AccordionCards',\n 'ipc-aplusdesc': 'AplusDesc',\n 'ipc-banner': 'HeroBanner',\n 'ipc-brand-equity': 'BrandEquity',\n 'ipc-category': 'Category',\n 'ipc-collection-banner': 'CollectionBanner',\n 'ipc-collection-shelves': 'CollectionShelves',\n 'ipc-creativemodule': 'CreativeModule',\n 'ipc-download': 'DownLoad',\n 'ipc-evaluate': 'Evaluate',\n 'ipc-faq': 'Faq',\n 'ipc-features': 'Features',\n 'ipc-footcharger': 'FootCharger',\n 'ipc-ga-block': 'GraphicAttractionBlock',\n 'ipc-giftbox': 'GiftBox',\n 'ipc-graphic': 'Graphic',\n 'ipc-graphicmore': 'GraphicMore',\n 'ipc-graphicoverlay': 'GraphicOverlay',\n 'ipc-marquee': 'Marquee',\n 'ipc-mediaplayerbase': 'MediaPlayerBase',\n 'ipc-mediaplayermulti': 'MediaPlayerMulti',\n 'ipc-mediaplayersticky': 'MediaPlayerSticky',\n 'ipc-member-equity': 'MemberEquity',\n 'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n 'ipc-search-page-tabs': 'SearchPageBlock',\n 'ipc-selectstore': 'SelectStore',\n 'ipc-shelfdisplay': 'ShelfDisplay',\n 'ipc-slogan': 'Slogan',\n 'ipc-spacer': 'Spacer',\n 'ipc-specs': 'Specs',\n 'ipc-tabs': 'Tabs',\n 'ipc-text-marquee': 'TextMarquee',\n 'ipc-title': 'Title',\n 'ipc-whychoose': 'WhyChoose',\n ksp: 'Ksp',\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "IPC_SEARCH_PAGE", "SearchPageTabType", "withLayout", "PAYLOAD_COMPONENT_MAP"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import c from"../biz-components/MediaSceneSwitcher/index.js";const s={title:"Biz-Components/MediaSceneSwitcher",component:c,parameters:{layout:"fullscreen",docs:{description:{component:"Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality"}}},decorators:[i=>t("div",{style:{paddingTop:"2em",background:"#000",minHeight:"100vh"},children:t(i,{})})],tags:["autodocs"]};var l=s;const e={id:"690c3b11535a7c9975ffcd47",display:"visible",title:"360 Times/Minute",subtitle:"Self-Cleaning",container:{mobileSpan:"12",desktopSpan:"10"},blockName:"\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public",blockType:"MediaSceneSwitcher",items:[{id:"690c3b32535a7c9975ffcd49",title:"Scrapes Off Dirt",tag:"20% OFF",videoUrl:{id:3066,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3067,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b35535a7c9975ffcd4b",title:"Cleans the Mop with Water and Detergent",tag:"20% OFF",videoUrl:{id:3068,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3069,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b38535a7c9975ffcd4d",title:"Squeezes Out Dirty Water",tag:"20% OFF",videoUrl:{id:3070,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3071,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null}]},d={args:{data:e}},o={args:{data:{...e,items:e.items.map(i=>({...i,tag:void 0}))}}},m={args:{data:{...e,items:e.items.map(i=>({...i,videoUrl:null}))}}},n={args:{data:{...e,items:e.items.slice(0,2)}}};export{d as Default,m as ImageOnly,n as TwoItems,o as WithoutTags,l as default};
|
|
2
|
+
//# sourceMappingURL=MediaSceneSwitcher.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/MediaSceneSwitcher.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaSceneSwitcher from '../biz-components/MediaSceneSwitcher/index.js'\n\nconst meta = {\n title: 'Biz-Components/MediaSceneSwitcher',\n component: MediaSceneSwitcher,\n parameters: {\n layout: 'fullscreen',\n docs: {\n description: {\n component: 'Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality',\n },\n },\n },\n decorators: [\n Story => (\n <div style={{ paddingTop: '2em', background: '#000', minHeight: '100vh' }}>\n <Story />\n </div>\n ),\n ],\n tags: ['autodocs'],\n} satisfies Meta<typeof MediaSceneSwitcher>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockData = {\n id: '690c3b11535a7c9975ffcd47',\n display: 'visible' as const,\n title: '360 Times/Minute',\n subtitle: 'Self-Cleaning',\n container: {\n mobileSpan: '12',\n desktopSpan: '10',\n },\n blockName: '\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public',\n blockType: 'MediaSceneSwitcher',\n items: [\n {\n id: '690c3b32535a7c9975ffcd49',\n title: 'Scrapes Off Dirt',\n tag: '20% OFF',\n videoUrl: {\n id: 3066,\n alt: null,\n baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n mimeType: 'video/mp4' as const,\n width: null,\n height: null,\n },\n imageUrl: {\n id: 3067,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n filename: 'Frame_2121235302.png',\n mimeType: 'image/png' as const,\n width: 1648,\n height: 1120,\n },\n mobVideoUrl: null,\n mobImageUrl: null,\n },\n {\n id: '690c3b35535a7c9975ffcd4b',\n title: 'Cleans the Mop with Water and Detergent',\n tag: '20% OFF',\n videoUrl: {\n id: 3068,\n alt: null,\n baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n mimeType: 'video/mp4' as const,\n width: null,\n height: null,\n },\n imageUrl: {\n id: 3069,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n filename: 'Frame_2121235302.png',\n mimeType: 'image/png' as const,\n width: 1648,\n height: 1120,\n },\n mobVideoUrl: null,\n mobImageUrl: null,\n },\n {\n id: '690c3b38535a7c9975ffcd4d',\n title: 'Squeezes Out Dirty Water',\n tag: '20% OFF',\n videoUrl: {\n id: 3070,\n alt: null,\n baseUrl: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n url: 'https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832',\n filename: '987f27aa1745438f80200fa6bc87429f.mp4',\n mimeType: 'video/mp4' as const,\n width: null,\n height: null,\n },\n imageUrl: {\n id: 3071,\n alt: null,\n baseUrl:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n url: 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856',\n filename: 'Frame_2121235302.png',\n mimeType: 'image/png' as const,\n width: 1648,\n height: 1120,\n },\n mobVideoUrl: null,\n mobImageUrl: null,\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: mockData,\n },\n}\n\nexport const WithoutTags: Story = {\n args: {\n data: {\n ...mockData,\n items: mockData.items.map(item => ({\n ...item,\n tag: undefined,\n })),\n },\n },\n}\n\nexport const ImageOnly: Story = {\n args: {\n data: {\n ...mockData,\n items: mockData.items.map(item => ({\n ...item,\n videoUrl: null,\n })),\n },\n },\n}\n\nexport const TwoItems: Story = {\n args: {\n data: {\n ...mockData,\n items: mockData.items.slice(0, 2),\n },\n },\n}\n"],
|
|
5
|
+
"mappings": "AAiBQ,cAAAA,MAAA,oBAhBR,OAAOC,MAAwB,gDAE/B,MAAMC,EAAO,CACX,MAAO,oCACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,iIACb,CACF,CACF,EACA,WAAY,CACVE,GACEH,EAAC,OAAI,MAAO,CAAE,WAAY,MAAO,WAAY,OAAQ,UAAW,OAAQ,EACtE,SAAAA,EAACG,EAAA,EAAM,EACT,CAEJ,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOC,EAAQF,EAGf,MAAMG,EAAW,CACf,GAAI,2BACJ,QAAS,UACT,MAAO,mBACP,SAAU,gBACV,UAAW,CACT,WAAY,KACZ,YAAa,IACf,EACA,UAAW,wDACX,UAAW,qBACX,MAAO,CACL,CACE,GAAI,2BACJ,MAAO,mBACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,EACA,CACE,GAAI,2BACJ,MAAO,0CACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,EACA,CACE,GAAI,2BACJ,MAAO,2BACP,IAAK,UACL,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QAAS,4EACT,IAAK,4EACL,aACE,+IACF,SAAU,uCACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,SAAU,CACR,GAAI,KACJ,IAAK,KACL,QACE,gIACF,IAAK,gIACL,aACE,gIACF,SAAU,uBACV,SAAU,YACV,MAAO,KACP,OAAQ,IACV,EACA,YAAa,KACb,YAAa,IACf,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAOA,EAAS,MAAM,IAAIG,IAAS,CACjC,GAAGA,EACH,IAAK,MACP,EAAE,CACJ,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,MAAOA,EAAS,MAAM,IAAIG,IAAS,CACjC,GAAGA,EACH,SAAU,IACZ,EAAE,CACJ,CACF,CACF,EAEaE,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGL,EACH,MAAOA,EAAS,MAAM,MAAM,EAAG,CAAC,CAClC,CACF,CACF",
|
|
6
|
+
"names": ["jsx", "MediaSceneSwitcher", "meta", "Story", "MediaSceneSwitcher_stories_default", "mockData", "Default", "WithoutTags", "item", "ImageOnly", "TwoItems"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,129 @@
|
|
|
1
|
-
import
|
|
1
|
+
import"react";import s from"../biz-components/ThreeDCarousel/index.js";const a={title:"Biz Components/ThreeDCarousel",component:s,parameters:{layout:"fullscreen",docs:{description:{component:`
|
|
2
|
+
3D \u8F6E\u64AD\u7EC4\u4EF6\uFF0C\u652F\u6301\u684C\u9762\u7AEF 3D \u89C6\u89C9\u6548\u679C\u548C\u79FB\u52A8\u7AEF\u6ED1\u52A8\u5C55\u793A\u3002\u9002\u7528\u4E8E\u4EA7\u54C1\u5C55\u793A\u3001\u56FE\u7247\u753B\u5ECA\u7B49\u573A\u666F\u3002
|
|
3
|
+
|
|
4
|
+
## \u529F\u80FD\u7279\u6027
|
|
5
|
+
|
|
6
|
+
- **\u684C\u9762\u7AEF 3D \u6548\u679C**\uFF1A\u4F7F\u7528 Swiper Coverflow \u6548\u679C\uFF0C\u63D0\u4F9B\u6C89\u6D78\u5F0F 3D \u89C6\u89C9\u4F53\u9A8C
|
|
7
|
+
- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u548C\u4EA4\u4E92\u65B9\u5F0F
|
|
8
|
+
- **\u5FAA\u73AF\u64AD\u653E**\uFF1A\u652F\u6301\u65E0\u9650\u5FAA\u73AF\u6ED1\u52A8
|
|
9
|
+
- **\u54CD\u5E94\u5F0F\u65AD\u70B9**\uFF1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574 3D \u6548\u679C\u53C2\u6570
|
|
10
|
+
- **\u56FE\u7247\u81EA\u9002\u5E94**\uFF1A\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u72EC\u7ACB\u56FE\u7247\u8D44\u6E90
|
|
11
|
+
|
|
12
|
+
## \u53EF\u7528\u7684\u8BED\u4E49\u5316 CSS \u7C7B\u540D
|
|
13
|
+
|
|
14
|
+
\u7EC4\u4EF6\u4F7F\u7528 BEM \u547D\u540D\u89C4\u8303\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u8BED\u4E49\u5316\u7C7B\u540D\u65B9\u4FBF\u6837\u5F0F\u5B9A\u5236\uFF1A
|
|
15
|
+
|
|
16
|
+
### \u6839\u5BB9\u5668
|
|
17
|
+
- \`.three-d-carousel\` - \u7EC4\u4EF6\u6839\u5143\u7D20
|
|
18
|
+
- \`.three-d-carousel__title\` - \u6807\u9898\u5143\u7D20
|
|
19
|
+
|
|
20
|
+
### \u684C\u9762\u7AEF\u5E03\u5C40
|
|
21
|
+
- \`.three-d-carousel__desktop\` - \u684C\u9762\u7AEF\u5BB9\u5668
|
|
22
|
+
- \`.three-d-carousel__swiper\` - Swiper \u5B9E\u4F8B
|
|
23
|
+
- \`.three-d-carousel__slide\` - \u5355\u4E2A\u6ED1\u5757
|
|
24
|
+
- \`.three-d-carousel__image\` - \u56FE\u7247\u5143\u7D20
|
|
25
|
+
- \`.three-d-carousel__nav-controls\` - \u5BFC\u822A\u63A7\u5236\u5BB9\u5668
|
|
26
|
+
- \`.three-d-carousel__nav-button\` - \u5BFC\u822A\u6309\u94AE
|
|
27
|
+
- \`.three-d-carousel__nav-button--prev\` - \u4E0A\u4E00\u5F20\u6309\u94AE
|
|
28
|
+
- \`.three-d-carousel__nav-button--next\` - \u4E0B\u4E00\u5F20\u6309\u94AE
|
|
29
|
+
- \`.three-d-carousel__nav-icon\` - \u5BFC\u822A\u56FE\u6807
|
|
30
|
+
|
|
31
|
+
### \u79FB\u52A8\u7AEF\u5E03\u5C40
|
|
32
|
+
- \`.three-d-carousel__mobile\` - \u79FB\u52A8\u7AEF\u5BB9\u5668
|
|
33
|
+
- \`.three-d-carousel__swiper-mobile\` - \u79FB\u52A8\u7AEF Swiper \u5B9E\u4F8B
|
|
34
|
+
- \`.three-d-carousel__slide-mobile\` - \u79FB\u52A8\u7AEF\u6ED1\u5757
|
|
35
|
+
- \`.three-d-carousel__image-mobile\` - \u79FB\u52A8\u7AEF\u56FE\u7247
|
|
36
|
+
|
|
37
|
+
### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B
|
|
38
|
+
|
|
39
|
+
\`\`\`css
|
|
40
|
+
/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u6837\u5F0F */
|
|
41
|
+
.three-d-carousel__nav-button {
|
|
42
|
+
opacity: 0.8;
|
|
43
|
+
transition: opacity 0.3s ease;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.three-d-carousel__nav-button:hover {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */
|
|
51
|
+
.three-d-carousel__title {
|
|
52
|
+
font-size: 3rem;
|
|
53
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
54
|
+
-webkit-background-clip: text;
|
|
55
|
+
-webkit-text-fill-color: transparent;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5706\u89D2 */
|
|
59
|
+
.three-d-carousel__image,
|
|
60
|
+
.three-d-carousel__image-mobile {
|
|
61
|
+
border-radius: 24px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u56FE\u6807\u989C\u8272 */
|
|
65
|
+
.three-d-carousel__nav-icon {
|
|
66
|
+
color: #667eea;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.three-d-carousel__nav-icon:hover {
|
|
70
|
+
color: #764ba2;
|
|
71
|
+
}
|
|
72
|
+
\`\`\`
|
|
73
|
+
`}}},tags:["autodocs"]};var l=a;const e={title:"Conquer Every Mess",items:[{imageUrl:{id:3064,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/a74e7b53-2842-4543-a56c-0f03b98492ef_pc-c1.png?v=1762410718",filename:"pc-c1.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3065,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762",url:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762",thumbnailURL:"https://cdn.shopify.com/s/files/1/0511/6346/3874/files/deb6c134-8541-422c-aeb6-dbaab5e405cd_mob-c1.png?v=1762410762",filename:"mob-c1.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null},{imageUrl:{id:3068,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e4c6e59e-b33d-46eb-8945-711bc312f1e8_pc-c2.png?v=1762416924",filename:"pc-c2.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3069,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/38b7c0da-ace6-4924-9d12-65cba98140d1_mob-c2.png?v=1762416954",filename:"mob-c2.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null},{imageUrl:{id:3070,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/66ee5a45-dd71-4d08-a440-99c703317ead_pc-c3.png?v=1762416983",filename:"pc-c3.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3071,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/e23460ae-2e6e-4a6b-8132-607e70e6d195_mob-c3.png?v=1762417000",filename:"mob-c3.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null},{imageUrl:{id:3072,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/4cddb6ea-4b20-4deb-9718-8ed70ab8583f_pc-c4.png?v=1762417037",filename:"pc-c4.png",mimeType:"image/png",width:1648,height:960},mobImageUrl:{id:3073,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/da9e09e9-be80-411a-bda0-80571d65a081_mob-c4.png?v=1762417058",filename:"mob-c4.png",mimeType:"image/png",width:592,height:720},title:"Text/Heading/h3",description:"Text/Body/t1",buttonText:"Learn More",buttonLink:null}]},n={args:{data:e},parameters:{docs:{description:{story:"\u9ED8\u8BA4\u573A\u666F\uFF0C\u5C55\u793A\u4E09\u4E2A\u6E05\u6D01\u573A\u666F\u7684 3D \u8F6E\u64AD\u6548\u679C\u3002\u684C\u9762\u7AEF\u652F\u6301\u70B9\u51FB\u5BFC\u822A\u6309\u94AE\u6216\u70B9\u51FB\u5E7B\u706F\u7247\u5207\u6362\uFF0C\u79FB\u52A8\u7AEF\u652F\u6301\u6ED1\u52A8\u5207\u6362\u3002"}}}},d={args:{data:{...e,items:[e.items[0]]}},parameters:{docs:{description:{story:"\u53EA\u6709\u4E00\u4E2A\u9879\u76EE\u7684\u60C5\u51B5\u3002\u4ECD\u7136\u53EF\u4EE5\u5FAA\u73AF\u6D4F\u89C8\u3002"}}}},p={args:{data:{...e,items:e.items.slice(0,2)}},parameters:{docs:{description:{story:"\u4E24\u4E2A\u9879\u76EE\u7684\u573A\u666F\uFF0C3D \u6548\u679C\u4F9D\u7136\u751F\u6548\u3002"}}}},m={args:{data:{...e,items:e.items.map(({mobImageUrl:o,...t})=>({...t,mobImageUrl:null}))}},parameters:{docs:{description:{story:"\u6CA1\u6709\u63D0\u4F9B\u79FB\u52A8\u7AEF\u4E13\u7528\u56FE\u7247\uFF0C\u5C06\u81EA\u52A8\u4F7F\u7528\u684C\u9762\u7AEF\u56FE\u7247\u8D44\u6E90\u3002"}}}},b={args:{data:e,className:"bg-gradient-to-b from-gray-900 to-black py-20"},parameters:{docs:{description:{story:`
|
|
74
|
+
\u901A\u8FC7 className \u5C5E\u6027\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5916\u89C2\u3002\u8BE5\u793A\u4F8B\u6DFB\u52A0\u4E86\u6E10\u53D8\u80CC\u666F\u548C\u5185\u8FB9\u8DDD\u3002
|
|
75
|
+
|
|
76
|
+
**\u53EF\u7528\u7684\u8BED\u4E49\u5316 CSS \u7C7B\u540D\uFF1A**
|
|
77
|
+
|
|
78
|
+
\`\`\`css
|
|
79
|
+
/* \u6839\u5BB9\u5668 */
|
|
80
|
+
.three-d-carousel { }
|
|
81
|
+
.three-d-carousel__title { }
|
|
82
|
+
|
|
83
|
+
/* \u684C\u9762\u7AEF\u5E03\u5C40 */
|
|
84
|
+
.three-d-carousel__desktop { }
|
|
85
|
+
.three-d-carousel__swiper { }
|
|
86
|
+
.three-d-carousel__slide { }
|
|
87
|
+
.three-d-carousel__image { }
|
|
88
|
+
.three-d-carousel__nav-controls { }
|
|
89
|
+
.three-d-carousel__nav-button { }
|
|
90
|
+
.three-d-carousel__nav-button--prev { }
|
|
91
|
+
.three-d-carousel__nav-button--next { }
|
|
92
|
+
.three-d-carousel__nav-icon { }
|
|
93
|
+
|
|
94
|
+
/* \u79FB\u52A8\u7AEF\u5E03\u5C40 */
|
|
95
|
+
.three-d-carousel__mobile { }
|
|
96
|
+
.three-d-carousel__swiper-mobile { }
|
|
97
|
+
.three-d-carousel__slide-mobile { }
|
|
98
|
+
.three-d-carousel__image-mobile { }
|
|
99
|
+
\`\`\`
|
|
100
|
+
|
|
101
|
+
**\u4F7F\u7528\u793A\u4F8B\uFF1A**
|
|
102
|
+
|
|
103
|
+
\`\`\`css
|
|
104
|
+
/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u6837\u5F0F */
|
|
105
|
+
.three-d-carousel__nav-button {
|
|
106
|
+
opacity: 0.8;
|
|
107
|
+
transition: opacity 0.3s ease;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.three-d-carousel__nav-button:hover {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */
|
|
115
|
+
.three-d-carousel__title {
|
|
116
|
+
font-size: 3rem;
|
|
117
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
118
|
+
-webkit-background-clip: text;
|
|
119
|
+
-webkit-text-fill-color: transparent;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5706\u89D2 */
|
|
123
|
+
.three-d-carousel__image,
|
|
124
|
+
.three-d-carousel__image-mobile {
|
|
125
|
+
border-radius: 24px;
|
|
126
|
+
}
|
|
127
|
+
\`\`\`
|
|
128
|
+
`}}}},h={args:{data:{...e,title:'Experience <span class="text-blue-400">Revolutionary</span> Cleaning'}},parameters:{docs:{description:{story:"\u4F7F\u7528 HTML \u6807\u7B7E\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F\u3002\u6807\u9898\u652F\u6301 HTML \u5185\u5BB9\uFF0C\u53EF\u4EE5\u6DFB\u52A0\u6837\u5F0F\u548C\u683C\u5F0F\u3002"}}}};export{h as CustomTitle,n as Default,d as SingleItem,p as TwoItems,b as WithCustomClass,m as WithoutMobileImages,l as default};
|
|
2
129
|
//# sourceMappingURL=ThreeDCarousel.stories.js.map
|