Spaces:
Running
Running
File size: 2,221 Bytes
bcb0fad e29580c f6f8d55 bcb0fad f6f8d55 bcb0fad f6f8d55 bcb0fad e29580c 05ce0d5 e29580c f6f8d55 e29580c 6692511 f6f8d55 6692511 bcb0fad f6f8d55 bcb0fad e986ba0 bcb0fad e29580c f6f8d55 e29580c e986ba0 e29580c f6f8d55 e29580c bcb0fad e986ba0 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import classNames from "classnames";
import { toast } from "sonner";
import { GridPattern } from "./../magicui/grid-pattern";
import { cn } from "../../lib/utils";
function Preview({
html,
isResizing,
isAiWorking,
ref,
device,
currentTab,
iframeRef,
}: {
html: string;
isResizing: boolean;
isAiWorking: boolean;
ref: React.RefObject<HTMLDivElement | null>;
iframeRef?: React.RefObject<HTMLIFrameElement | null>;
device: "desktop" | "mobile";
currentTab: string;
}) {
return (
<div
ref={ref}
className={classNames(
"w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
{
"lg:p-4": currentTab !== "preview",
}
)}
onClick={(e) => {
if (isAiWorking) {
e.preventDefault();
e.stopPropagation();
toast.warning("Please wait for the AI to finish working.");
}
}}
>
<GridPattern
x={-1}
y={-1}
strokeDasharray={"4 2"}
className={cn(
"[mask-image:radial-gradient(900px_circle_at_center,white,transparent)]"
)}
/>
<iframe
id="preview-iframe"
ref={iframeRef}
title="output"
className={classNames(
"w-full select-none transition-all duration-200 bg-black max-lg:h-full",
{
"pointer-events-none": isResizing || isAiWorking,
"lg:max-w-md lg:mx-auto lg:h-[80dvh] lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl":
device === "mobile",
"h-full": device === "desktop",
"lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[44px]":
currentTab !== "preview" && device === "desktop",
}
)}
srcDoc={html}
onLoad={() => {
if (iframeRef?.current?.contentWindow?.document?.body) {
iframeRef.current.contentWindow.document.body.scrollIntoView({
block: isAiWorking ? "end" : "start",
inline: "nearest",
behavior: isAiWorking ? "instant" : "smooth",
});
}
}}
/>
</div>
);
}
export default Preview;
|