@kit-data-manager/react-search-component
Version:
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.
9 lines • 2.5 kB
JavaScript
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 md:rfs-items-center rfs-p-2 d ${invertImageInDarkMode ? "dark:rfs-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 group-hover/resultView:rfs-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: "md:rfs-max-h-[200px] md:rfs-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 dark:rfs-text-background", children: _jsx(ImageOff, { className: "rfs-size-6 rfs-text-muted-foreground/50" }) })) }));
}
//# sourceMappingURL=GenericResultViewImage.js.map