Spaces:
Running
Running
File size: 1,429 Bytes
bcb0fad a582fa0 bcb0fad a582fa0 bcb0fad |
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
import classNames from "classnames";
import { useRef } from "react";
import { TbReload } from "react-icons/tb";
function Preview({
html,
isResizing,
isAiWorking,
ref,
}: {
html: string;
isResizing: boolean;
isAiWorking: boolean;
ref: React.RefObject<HTMLDivElement | null>;
}) {
const iframeRef = useRef<HTMLIFrameElement | null>(null);
const handleRefreshIframe = () => {
if (iframeRef.current) {
const iframe = iframeRef.current;
const content = iframe.srcdoc;
iframe.srcdoc = "";
setTimeout(() => {
iframe.srcdoc = content;
}, 10);
}
};
return (
<div
ref={ref}
className="w-full border-l border-gray-900 bg-white h-[calc(70dvh-53px)] lg:h-[calc(100dvh-54px)] relative"
>
<iframe
ref={iframeRef}
title="output"
className={classNames("w-full h-full select-none", {
"pointer-events-none": isResizing || isAiWorking,
})}
srcDoc={html}
/>
<button
className="bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium absolute bottom-3 lg:bottom-5 right-3 lg:right-5 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={handleRefreshIframe}
>
<TbReload />
Refresh Preview
</button>
</div>
);
}
export default Preview;
|