add a desktop preview
This commit is contained in:
parent
5a8d7d9071
commit
169dd0a337
@ -1,6 +1,7 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import ImageUpload from "./components/ImageUpload";
|
import ImageUpload from "./components/ImageUpload";
|
||||||
import CodePreview from "./components/CodePreview";
|
import CodePreview from "./components/CodePreview";
|
||||||
|
import Preview from "./components/Preview";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [referenceImages, setReferenceImages] = useState<string[]>([]);
|
const [referenceImages, setReferenceImages] = useState<string[]>([]);
|
||||||
@ -16,13 +17,14 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<CodePreview content="Hello World" />
|
|
||||||
|
|
||||||
{referenceImages.length === 0 && (
|
{referenceImages.length === 0 && (
|
||||||
<>
|
<>
|
||||||
<ImageUpload setReferenceImages={setReferenceImages} />
|
<ImageUpload setReferenceImages={setReferenceImages} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<CodePreview content="Hello World" />
|
||||||
|
<Preview />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
13
frontend/src/components/Preview.tsx
Normal file
13
frontend/src/components/Preview.tsx
Normal 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;
|
||||||
Loading…
Reference in New Issue
Block a user