File size: 2,661 Bytes
20ec4ad |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { useRef } from "react";
import { TbReload } from "react-icons/tb";
import { toast } from "react-toastify";
import { FaLaptopCode } from "react-icons/fa6";
import { defaultHTML } from "../../../utils/consts";
function Preview({ html, isResizing, isAiWorking, setView, ref, }) {
const iframeRef = useRef(null);
const handleRefreshIframe = () => {
if (iframeRef.current) {
const iframe = iframeRef.current;
const content = iframe.srcdoc;
iframe.srcdoc = "";
setTimeout(() => {
iframe.srcdoc = content;
}, 10);
}
};
return (_jsxs("div", { ref: ref, className: "w-full border-l border-gray-900 bg-white h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative", onClick: (e) => {
if (isAiWorking) {
e.preventDefault();
e.stopPropagation();
toast.warn("Please wait for the AI to finish working.");
}
}, children: [_jsx("iframe", { ref: iframeRef, title: "output", className: classNames("w-full h-full select-none", {
"pointer-events-none": isResizing || isAiWorking,
}), srcDoc: html }), _jsxs("div", { className: "flex items-center justify-start gap-3 absolute bottom-3 lg:bottom-5 max-lg:left-3 lg:right-5", children: [_jsxs("button", { className: "lg:hidden bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer", onClick: () => setView("editor"), children: [_jsx(FaLaptopCode, { className: "text-sm" }), "Hide preview"] }), html === defaultHTML && (_jsxs("a", { href: "https://huggingface.co/spaces/victor/deepsite-gallery", target: "_blank", className: "bg-gray-200 text-gray-950 text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-200 hover:bg-gray-300 transition-all duration-100 cursor-pointer", children: ["\uD83D\uDDBC\uFE0F ", _jsx("span", { children: "DeepSite Gallery" })] })), !isAiWorking && (_jsxs("button", { className: "bg-white lg:bg-gray-950 shadow-md text-gray-950 lg:text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 lg:border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer", onClick: handleRefreshIframe, children: [_jsx(TbReload, { className: "text-sm" }), "Refresh Preview"] }))] })] }));
}
export default Preview;
|