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

make layout better

Browse Source
This commit is contained in:
Abi Raja 2023-11-14 23:33:06 -05:00
parent 51c7334c0e
commit c4b99c125e
3 changed files with 90 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
frontend/src/App.tsx
View File

@ -21,6 +21,14 @@ function App() {
setBlobUrl(url);
};
const reset = () => {
setAppState("INITIAL");
setGeneratedCode("");
setReferenceImages([]);
setExecutionConsole([]);
setBlobUrl("");
};
function startCodeGeneration(referenceImages: string[]) {
setAppState("CODING");
setReferenceImages(referenceImages);
@ -42,79 +50,91 @@ function App() {
}
return (
<div className="mx-auto mt-6 max-w-[1000px]">
<h1 className="text-4xl mb-2 text-center">Screenshot to Code</h1>
<h1 className="text-base text-gray-500 mb-2 text-center">
drag & drop a screenshot below
</h1>
<div className="mt-6">
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
<div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
<h1 className="text-2xl mt-10">Screenshot to Code</h1>
<h2 className="text-sm text-gray-500 mb-2">
Drag & drop a screenshot to get started.
</h2>
{appState === "INITIAL" && (
<>
<ImageUpload setReferenceImages={startCodeGeneration} />
</>
)}
{(appState === "CODING" || appState === "CODE_READY") && (
<>
<div className="flex gap-x-2 justify-around">
<div
className={classNames({
"scanning relative": appState === "CODING",
})}
>
<img
className="w-[300px]"
src={referenceImages[0]}
alt="Reference"
/>
</div>
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800">Console</h2>
{executionConsole.map((line, index) => (
<div
key={index}
className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
>
{line}
</div>
))}
</div>
</div>
{/* Show code preview only when coding */}
{appState === "CODING" && (
{(appState === "CODING" || appState === "CODE_READY") && (
<>
<div className="flex items-center gap-x-1">
<Spinner />
{executionConsole.slice(-1)[0]}
{/* Show code preview only when coding */}
{appState === "CODING" && (
<div className="flex flex-col">
<div className="flex items-center gap-x-1">
<Spinner />
{executionConsole.slice(-1)[0]}
</div>
<CodePreview code={generatedCode} />
</div>
)}
<div className="flex gap-x-2">
<div
className={classNames({
"scanning relative": appState === "CODING",
})}
>
<img
className="w-[340px]"
src={referenceImages[0]}
alt="Reference"
/>
</div>
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800">
Console
</h2>
{executionConsole.map((line, index) => (
<div
key={index}
className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
>
{line}
</div>
))}
</div>
</div>
<CodePreview code={generatedCode} />
{appState === "CODE_READY" && (
<div className="flex items-center gap-x-2 mb-4">
<a
className="bg-button/70 hover:bg-highlight text-black
py-2 px-4 rounded transition duration-300"
onClick={createBlobUrl}
href={blobUrl}
download="index.html"
>
Download
</a>
<button
className="bg-button/70 hover:bg-highlight text-black
py-2 px-4 rounded transition duration-300"
onClick={reset}
>
Reset
</button>
</div>
)}
</>
)}
{appState === "CODE_READY" && (
<div className="flex items-center gap-x-2 mb-4 justify-end">
<a
className="bg-button/70 hover:bg-highlight text-black
py-2 px-4 rounded transition duration-300"
onClick={createBlobUrl}
href={blobUrl}
download="index.html"
>
Download code
</a>
<a
className="bg-button/70 hover:bg-highlight text-black
py-2 px-4 rounded transition duration-300"
onClick={createBlobUrl}
href={blobUrl}
download="index.html"
>
Reset
</a>
</div>
)}
<Preview code={generatedCode} />
</>
)}
</div>
</div>
<main className="py-2 lg:pl-96">
{appState === "INITIAL" && (
<>
<ImageUpload setReferenceImages={startCodeGeneration} />
</>
)}
{(appState === "CODING" || appState === "CODE_READY") && (
<div className="ml-4">
<Preview code={generatedCode} />
</div>
)}
</main>
</div>
);
}

2
frontend/src/components/ImageUpload.tsx
View File

@ -5,7 +5,7 @@ import { toast } from "react-hot-toast";
const baseStyle = {
flex: 1,
width: "50%",
width: "80%",
margin: "0 auto",
minHeight: "400px",
display: "flex",

2
frontend/src/index.css
View File

@ -28,6 +28,6 @@ body {
transform: translateX(0px);
}
50% {
transform: translateX(300px);
transform: translateX(340px);
}
}