Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show generated code in preview

Browse Source
This commit is contained in:
Abi Raja 2023-11-14 14:49:05 -05:00
parent 209929d6b3
commit 444c16abe6
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@ -16,7 +16,7 @@ function App() {
}
return (
<div className="mx-auto mt-10 max-w-2xl">
<div className="mx-auto mt-10 max-w-[1000px]">
<h1 className="text-2xl mb-4">Drag & Drop a Screenshot</h1>
{referenceImages.length > 0 && (
<img className="w-[300px]" src={referenceImages[0]} alt="Reference" />
@ -29,7 +29,7 @@ function App() {
)}
<CodePreview code={generatedCode} />
<Preview />
<Preview code={generatedCode} />
</div>
);
}

10
frontend/src/components/Preview.tsx
View File

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