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

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

@ -1,11 +1,15 @@
function Preview() { interface Props {
code: string;
}
function Preview({ code }: Props) {
return ( return (
<div className="w-[704px]"> <div className="w-[704px]">
<iframe <iframe
title="Iframe Example" title="Iframe Example"
srcDoc={"<h1>Hello World</h1>"} srcDoc={code}
className="border-[5px] border-black rounded-[33px] p-4 shadow-lg 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> ></iframe>
</div> </div>
); );