From 444c16abe6424c2d6eec7a0f8f51723b01d4f473 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 14:49:05 -0500
Subject: [PATCH] show generated code in preview

---
 frontend/src/App.tsx                |  4 ++--
 frontend/src/components/Preview.tsx | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 74556cf..6932925 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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>
   );
 }
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 5cbaf84..c8508b1 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -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>
   );