@etsoo/website/lib/components/BSCarousel.js

ETSOO CMS Based NextJs Website Framework

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { HtmlContent } from './HtmlContent';
/**
 * Bootstrap Carousel Component
 * @param props Properties
 * @returns Component
 */
export function BSCarousel(props) {
    // Destruct
    const { id = 'carousel', items, interval, controls = true, indicators = true, fade = false, dark = false, caption = true, captionDisplay } = props;
    const target = `#${id}`;
    const classNames = ['carousel', 'slide'];
    if (fade) {
        classNames.push('carousel-fade');
    }
    if (dark) {
        classNames.push('carousel-dark');
    }
    // Layout
    return (_jsxs("div", { id: id, className: classNames.join(' '), "data-bs-ride": "carousel", children: [indicators && (_jsx("div", { className: "carousel-indicators", children: items.map((item, index) => (_jsx("button", { type: "button", "data-bs-target": target, "data-bs-slide-to": index, className: index === 0 ? 'active' : undefined, "aria-current": index === 0 ? 'true' : undefined, "aria-label": item.title }, index))) })), _jsx("div", { className: "carousel-inner", children: items.map((item, index) => {
                    const captions = item.content && caption ? (_jsxs("div", { className: captionDisplay
                            ? `carousel-caption d-none d-${captionDisplay}-block`
                            : 'carousel-caption d-block', children: [_jsx("h4", { children: item.title }), _jsx(HtmlContent, { innerHTML: item.content })] })) : (_jsx(React.Fragment, {}));
                    return (_jsx("div", { className: index === 0
                            ? 'carousel-item active'
                            : 'carousel-item', "data-bs-interval": interval, children: 'image' in item ? (_jsxs(React.Fragment, { children: [_jsx("img", { src: item.image }), captions] })) : (_jsx("div", { className: "carousel-caption-only", children: captions })) }, index));
                }) }), controls && (_jsxs(React.Fragment, { children: [_jsxs("button", { className: "carousel-control-prev", type: "button", "data-bs-target": target, "data-bs-slide": "prev", children: [_jsx("span", { className: "carousel-control-prev-icon", "aria-hidden": "true" }), _jsx("span", { className: "visually-hidden", children: "Previous" })] }), _jsxs("button", { className: "carousel-control-next", type: "button", "data-bs-target": target, "data-bs-slide": "next", children: [_jsx("span", { className: "carousel-control-next-icon", "aria-hidden": "true" }), _jsx("span", { className: "visually-hidden", children: "Next" })] })] }))] }));
}