@kit-data-manager/react-search-component/dist/components/result/GenericResultViewImage.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 { GenericResultViewImageCarousel } from "../../components/result/GenericResultViewImageCarousel";
import { Fullscreen, ImageOff } from "lucide-react";
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
export function GenericResultViewImage({ previewImage, invertImageInDarkMode, title }) {
    return (_jsx("div", { className: `rfs:flex rfs:justify-center rfs:rounded rfs:md:items-center rfs:p-2 d ${invertImageInDarkMode ? "rfs:dark:invert" : ""} `, children: previewImage ? (Array.isArray(previewImage) ? (_jsxs("div", { className: "rfs:relative", children: [_jsx(GenericResultViewImageCarousel, { images: previewImage, title: title }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "outline", className: "rfs:p-0 rfs:absolute rfs:right-0 rfs:top-0 rfs:bottom-0 rfs:m-auto rfs:translate-y-[50px] rfs:w-8 rfs:h-8 rfs:opacity-0 rfs:group-hover/result-view:opacity-100 rfs:transition-opacity", children: _jsx(Fullscreen, { className: "rfs:size-4" }) }) }), _jsxs(DialogContent, { className: "rfs:max-w-[90vw] rfs:max-h-[90vh] rfs:w-fit rfs:p-0! rfs:overflow-auto", children: [_jsx("div", { className: "rfs:p-4", children: _jsx(GenericResultViewImageCarousel, { images: previewImage, title: title, fullSize: true }) }), _jsx("div", { className: "rfs:bg-muted rfs:p-4 rfs:rounded-b-lg", children: _jsx(DialogTitle, { children: title }) })] })] })] })) : (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { className: "rfs:justify-center rfs:flex", children: _jsx("img", { className: "rfs:md:max-h-[200px] rfs:md:max-w-[200px] rfs:max-h-full rfs:object-contain", src: previewImage, alt: `Preview for ${title}` }) }), _jsxs(DialogContent, { className: "rfs:p-0! rfs:max-w-[calc(100vw-40px)]! rfs:max-h-[calc(100vh-40px)]! rfs:w-fit! rfs:overflow-auto", children: [_jsx("div", { className: "rfs:justify-center rfs:flex rfs:p-4", children: _jsx("img", { src: previewImage, alt: `Preview for ${title}` }) }), _jsx("div", { className: "rfs:bg-muted rfs:p-4 rfs:rounded-b-lg", children: _jsx(DialogTitle, { children: title }) })] })] }))) : (_jsx("div", { className: "rfs:flex rfs:flex-col rfs:justify-center rfs:dark:text-background", children: _jsx(ImageOff, { className: "rfs:size-6 rfs:text-muted-foreground/50" }) })) }));
}
//# sourceMappingURL=GenericResultViewImage.js.map