Spaces:
Running
Running
File size: 1,843 Bytes
bcb0fad e29580c f6f8d55 bcb0fad f6f8d55 bcb0fad f6f8d55 bcb0fad e29580c 05ce0d5 e29580c f6f8d55 e29580c 6692511 f6f8d55 6692511 bcb0fad f6f8d55 bcb0fad e29580c f6f8d55 e29580c f6f8d55 e29580c f6f8d55 e29580c 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 |
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
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-[64px] 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}
/>
</div>
);
}
export default Preview;
|