Spaces:
Running
Running
File size: 2,312 Bytes
13ae717 ec1f23a 13ae717 ec1f23a 13ae717 |
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 81 |
"use client";
import classNames from "classnames";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { GridPattern } from "@/components/magic-ui/grid-pattern";
export const 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",
"max-lg:h-0": currentTab === "chat",
"max-lg:h-full": 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",
{
"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-[24px]":
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>
);
};
|