diff --git a/components/primitives/Carrusel.tsx b/components/primitives/Carrusel.tsx deleted file mode 100644 index c735e0e..0000000 --- a/components/primitives/Carrusel.tsx +++ /dev/null @@ -1,90 +0,0 @@ -'use client'; - -import { useCallback, useEffect, useState, type ReactNode } from 'react'; -import useEmblaCarousel from 'embla-carousel-react'; -import Autoplay from 'embla-carousel-autoplay'; -import { usePrefersReducedMotion } from '@/lib/motion'; - -// Thin Embla wrapper shared by the hero's pain-point rotator and the mobile -// row of inflection points. Autoplay pauses on hover/focus/interaction, and -// never runs at all for users who asked for less motion — it's still a fully -// usable carousel (drag, dots, keyboard) with it off, just static. -export function Carrusel({ - slides, - autoplayMs, - className = '', - slideClassName = '', - ariaLabel, - mostrarContador = false, -}: { - slides: ReactNode[]; - autoplayMs?: number; - className?: string; - slideClassName?: string; - ariaLabel: string; - // "01 / 06" + flechas prev/next, en vez de puntos — el patrón de - // en-ti.com ("desliza para explorar") para carruseles con más peso. - mostrarContador?: boolean; -}) { - const reduced = usePrefersReducedMotion(); - const plugins = autoplayMs && !reduced ? [Autoplay({ delay: autoplayMs, stopOnInteraction: false, stopOnMouseEnter: true })] : []; - const [emblaRef, embla] = useEmblaCarousel({ loop: true }, plugins); - const [selected, setSelected] = useState(0); - - useEffect(() => { - if (!embla) return; - const onSelect = () => setSelected(embla.selectedScrollSnap()); - embla.on('select', onSelect); - onSelect(); - return () => { - embla.off('select', onSelect); - }; - }, [embla]); - - const scrollTo = useCallback((i: number) => embla?.scrollTo(i), [embla]); - const scrollPrev = useCallback(() => embla?.scrollPrev(), [embla]); - const scrollNext = useCallback(() => embla?.scrollNext(), [embla]); - - return ( -
- {String(selected + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')} -
- -Dos
,Tres
]} />); - expect(screen.getByText('Uno')).toBeInTheDocument(); - expect(screen.getByText('Dos')).toBeInTheDocument(); - expect(screen.getByText('Tres')).toBeInTheDocument(); - }); - it('renders one position dot per slide, and marks the current one', () => { - render(Dos
]} />); - const dots = screen.getAllByRole('button', { name: /ir a la tarjeta/i }); - expect(dots).toHaveLength(2); - expect(dots[0]).toHaveAttribute('aria-current', 'true'); - }); - it('moves to a slide when its dot is clicked', async () => { - const user = userEvent.setup(); - render(Dos
]} />); - const dots = screen.getAllByRole('button', { name: /ir a la tarjeta/i }); - await user.click(dots[1]); - expect(dots[1]).toHaveAttribute('aria-current', 'true'); - }); - it('hides the dots entirely for a single slide', () => { - render(Dos
,Tres
]} />); - expect(screen.getByText('01')).toBeInTheDocument(); - expect(screen.getByText(/\/ 03/)).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Siguiente' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'Anterior' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: /ir a la tarjeta/i })).not.toBeInTheDocument(); - }); - it('advances the counter when the next arrow is clicked', async () => { - const user = userEvent.setup(); - render(Dos
]} />); - await user.click(screen.getByRole('button', { name: 'Siguiente' })); - expect(screen.getByText('02')).toBeInTheDocument(); - }); -}); diff --git a/lib/motion.ts b/lib/motion.ts index 843e111..b44978c 100644 --- a/lib/motion.ts +++ b/lib/motion.ts @@ -66,8 +66,7 @@ export const motionProps = (reduced: boolean) => // Cycles through `count` steps on its own (Mecanismo, ComoEmpezar): each // manual change restarts the dwell timer, hovering pauses it, and it never -// advances at all for reduced-motion users — same shape as the Carrusel -// autoplay, for step indicators that aren't a carousel. +// advances at all for reduced-motion users. export function useAutoStep(count: number, intervalMs = 3500) { const reduced = usePrefersReducedMotion(); const [active, setActive] = useState(0);