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

AppState.CODING show multiple reference images when applicable

Browse Source
This commit is contained in:
Piyush Mishra 2023-11-27 09:59:09 +05:30
parent 3442ce3ae6
commit 9034048089
1 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/App.tsx
View File

@ -500,37 +500,34 @@ function App() {
{/* Reference image display */}
<div className="flex gap-x-2 mt-2">
{referenceImages.length > 0 && (
<div className="flex flex-col">
<div
className={classNames({
"scanning relative": appState === AppState.CODING,
})}
>
{inputMode === "image" && (
<img
className="w-[340px] border border-gray-200 rounded-md"
src={referenceImages[0]}
alt="Reference"
/>
)}
{inputMode === "video" && (
<video
muted
autoPlay
loop
className="w-[340px] border border-gray-200 rounded-md"
src={referenceImages[0]}
/>
)}
</div>
<div className="text-gray-400 uppercase text-sm text-center mt-1">
{inputMode === "video"
? "Original Video"
: "Original Screenshot"}
</div>
<div className="flex flex-col">
<div
className={classNames({
"scanning relative": appState === AppState.CODING,
})}
>
{referenceImages.length > 1 ? (
<div className="grid grid-cols-2 gap-2">
{referenceImages.map((image, i) => (
<img
className="border max-h-40 w-full h-full object-contain border-gray-200 rounded-md"
src={image}
alt={`Reference image: ${i}`}
/>
))}
</div>
) : (
<img
className="w-[340px] border border-gray-200 rounded-md"
src={referenceImages[0]}
alt-="Reference Image"
/>
)}
</div>
)}
<div className="text-gray-400 uppercase text-sm text-center mt-1">
Original Screenshot{referenceImages.length > 1 ? "s" : ""}
</div>
</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