From 9034048089deac949a3034e33d4066f23ce2f60a Mon Sep 17 00:00:00 2001
From: Piyush Mishra <piyush_mishra31@outlook.com>
Date: Mon, 27 Nov 2023 09:59:09 +0530
Subject: [PATCH] AppState.CODING show multiple reference images when
 applicable

---
 frontend/src/App.tsx | 57 +++++++++++++++++++++-----------------------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 83d5d87..c14bf73 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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