50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T205a,"use client"; import { useEffect, useRef, useState, type KeyboardEvent } from "react"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; import { A11y, Autoplay, EffectCards } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import type { Swiper as SwiperInstance } from "swiper/types"; import "swiper/css"; import "swiper/css/effect-cards"; import "swiper/css/a11y"; // A deck of photos you flick through. The top card flies off to the side when you drag it and the // next one settles into its place, with the rest fanned out behind. Swiper's "cards" effect does // the 3D, we add the buttons and dots around it. Those talk to THIS deck through its instance, // not through global class names, so two decks on one page never steer each other. export type SwipeableCard = { /** The image address. */ src: string; /** What the image shows, for screen readers. */ alt: string; }; export type SwipeableCardsProps = { /** The cards, top one first. Eight or more looks best. */ images: SwipeableCard[]; /** Width of a card, in pixels. On a narrower screen it shrinks to fit. */ cardWidth?: number; /** Height of a card, in pixels. */ cardHeight?: number; /** Corner radius of a card, in pixels. */ radius?: number; /** Start again at the first card after the last one. */ loop?: boolean; /** Flick to the next card on a timer. It pauses under the pointer and never runs for visitors who prefer reduced motion. */ autoplay?: boolean; /** Milliseconds between cards while autoplay is on. */ autoplayDelay?: number; /** Milliseconds a card takes to move. Visitors who prefer reduced motion get an instant change. */ speed?: number; /** Tilt of each card behind the top one, in degrees. */ perSlideRotate?: number; /** How far each card behind the top one peeks out to the side, in pixels (roughly). */ perSlideOffset?: number; /** Tilt the cards as they fan out. Off keeps the deck flat and straight. */ rotate?: boolean; /** Darken the cards behind the top one, so the deck has depth. */ slideShadows?: boolean; /** Show previous and next buttons under the deck. */ showNavigation?: boolean; /** Show one dot per card under the deck. They are buttons too. */ showPagination?: boolean; /** Show a grab hand over the deck. */ grabCursor?: boolean; /** The name screen readers announce for the deck. */ label?: string; /** Called with the number of the card on top (starting at 0) each time it changes. */ onIndexChange?: (index: number) => void; /** Extra classes for the outer box. */ className?: string; /** Extra classes for each card, e.g. a different shadow. */ cardClassName?: string; }; export function SwipeableCards({ images, cardWidth = 300, cardHeight = 440, radius = 24, loop = true, autoplay = false, autoplayDelay = 2500, speed = 300, perSlideRotate = 2, perSlideOffset = 8, rotate = true, slideShadows = true, showNavigation = false, showPagination = false, grabCursor = true, label = "Swipeable cards", onIndexChange, className = "", cardClassName = "shadow-[0_26px_40px_-22px_rgba(0,0,0,0.5)]", }: SwipeableCardsProps) { // The Swiper instance of this deck. The buttons and the dots use it. const swiperRef = useRef(null); const [index, setIndex] = useState(0); // Read after mount so the server and the first client render match const [reducedMotion, setReducedMotion] = useState(false); useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReducedMotion(query.matches); update(); query.addEventListener("change", update); return () => query.removeEventListener("change", update); }, []); // Swiper doesn't pick up a change of loop, autoplay or the card effect settings on its own, so // those rebuild the deck (it stays on the same card). Everything else, like speed, updates in place. const running = autoplay && !reducedMotion; const deckKey = `${loop}-${rotate}-${slideShadows}-${perSlideRotate}-${perSlideOffset}-${running}-${autoplayDelay}-${images.length}`; // The listener lives on the box that holds the deck, so only the deck the visitor focused reacts const onKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowRight") { event.preventDefault(); swiperRef.current?.slideNext(); } else if (event.key === "ArrowLeft") { event.preventDefault(); swiperRef.current?.slidePrev(); } }; const buttonClass = "grid h-11 w-11 place-items-center rounded-full border border-current/25 bg-transparent text-inherit transition-colors duration-200 hover:bg-current/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"; return (

{ swiperRef.current = swiper; }} onRealIndexChange={(swiper) => { setIndex(swiper.realIndex); onIndexChange?.(swiper.realIndex); }} > {images.map((image, i) => ( {image.alt}

))}

{(showNavigation || showPagination) && (

{showNavigation && ( )} {showPagination && (

{images.map((image, i) => ( ))}

)} {showNavigation && ( )}

)}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","swiper",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/swiper","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"swiper"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dimaac/swipeable-cards/swipeable-cards.tsx","content":"$52","type":"registry:component","target":"components/dimaac/swipeable-cards.tsx"}],"className":"h-[70svh] min-h-80"}]]}]