@amsterdam/design-system-react/dist/ImageSlider/ImageSliderThumbnails.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { generateAspectRatioClass } from '../Image/generateAspectRatioClass';
export const ImageSliderThumbnails = ({ currentSlideId, imageLabel, scrollToSlide, thumbnails, }) => {
    const handleKeyDown = (event) => {
        const element = event.currentTarget.children[currentSlideId];
        if (event.key === 'ArrowRight') {
            const nextElement = element?.nextElementSibling;
            if (nextElement) {
                nextElement.focus();
                scrollToSlide(currentSlideId + 1);
            }
        }
        if (event.key === 'ArrowLeft') {
            const previousElement = element?.previousElementSibling;
            if (previousElement) {
                previousElement.focus();
                scrollToSlide(currentSlideId - 1);
            }
        }
    };
    return (_jsx("nav", { className: "ams-image-slider__thumbnails", onKeyDown: handleKeyDown, role: "tablist", children: thumbnails.map(({ alt, aspectRatio, src }, index) => (_jsx("button", { "aria-label": `${imageLabel} ${index + 1}: ${alt}`, "aria-posinset": index + 1, "aria-selected": currentSlideId === index ? 'true' : 'false', "aria-setsize": thumbnails.length, className: clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)), onClick: () => scrollToSlide(index), role: "tab", style: { backgroundImage: `url(${src})` }, tabIndex: currentSlideId === index ? 0 : -1, type: "button" }, `${index}-${src}`))) }));
};