@kit-data-manager/react-search-component/dist/components/result/GenericResultViewImageCarousel.js

All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../../components/ui/carousel";
import { useEffect, useState } from "react";
export function GenericResultViewImageCarousel({ images, title, fullSize }) {
    const [api, setApi] = useState();
    const [slide, setSlide] = useState(0);
    useEffect(() => {
        if (api) {
            api.on("select", () => setSlide(api.selectedScrollSnap()));
        }
    }, [api]);
    return (_jsxs(Carousel, { className: "w-full max-w-xs rfs-relative", setApi: setApi, children: [_jsx(CarouselContent, { children: images.map((image, index) => (_jsx(CarouselItem, { className: "rfs-flex rfs-justify-center", children: _jsx("img", { className: fullSize ? "" : "md:rfs-size-[200px]", src: image, alt: `Preview ${index + 1} of ${images.length} for ${title ?? "unnamed result"}` }) }, index))) }), _jsxs("div", { className: fullSize ? "" : "rfs-opacity-0 group-hover/resultView:rfs-opacity-100 rfs-transition-opacity", children: [_jsx(CarouselPrevious, {}), _jsx(CarouselNext, {})] }), _jsxs("div", { className: "rfs-text-muted-foreground rfs-text-center rfs-text-xs rfs-mt-2", children: ["Image ", slide + 1, " of ", images.length] })] }));
}
//# sourceMappingURL=GenericResultViewImageCarousel.js.map