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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import { clsx } from 'clsx';
import { Figure } from '../Figure/Figure';
import { Image } from '../Image/Image';
export const ImageSliderSlide = ({ alt, aspectRatio, caption, className, currentSlideId, index, sizes, src, srcSet, ...restProps }) => {
    const isCurrentSlide = index === currentSlideId;
    const slideProps = {
        'aria-hidden': isCurrentSlide ? undefined : true,
        className: clsx('ams-image-slider__slide', className),
    };
    const imageProps = { alt, aspectRatio, sizes, src, srcSet };
    return caption ? (_jsxs(Figure, { ...restProps, ...slideProps, className: clsx(slideProps.className, 'ams-image-slider__figure'), children: [_jsx(Image, { ...imageProps }), _jsx(Figure.Caption, { className: "ams-image-slider__caption", children: caption })] })) : (_jsx(Image, { ...restProps, ...imageProps, ...slideProps }));
};
ImageSliderSlide.displayName = 'ImageSliderSlide';