add a desktop preview

This commit is contained in:
Abi Raja 2023-11-14 13:36:34 -05:00
parent 5a8d7d9071
commit 169dd0a337
2 changed files with 17 additions and 2 deletions

View File

@ -1,6 +1,7 @@
import { useState } from "react";
import ImageUpload from "./components/ImageUpload";
import CodePreview from "./components/CodePreview";
import Preview from "./components/Preview";
function App() {
const [referenceImages, setReferenceImages] = useState<string[]>([]);
@ -16,13 +17,14 @@ function App() {
/>
)}
<CodePreview content="Hello World" />
{referenceImages.length === 0 && (
<>
<ImageUpload setReferenceImages={setReferenceImages} />
</>
)}
<CodePreview content="Hello World" />
<Preview />
</div>
);
}

View File

@ -0,0 +1,13 @@
function Preview() {
return (
<div className="w-[704px]">
<iframe
title="Iframe Example"
srcDoc={"<h1>Hello World</h1>"}
className="border-[5px] border-black rounded-[33px] p-4 shadow-lg
transform scale-[0.55] origin-top-left w-[1280px] h-[832px]"
></iframe>
</div>
);
}
export default Preview;