From 169dd0a337b1eb5bca3c5e9110d8aa1da87fb4f6 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 13:36:34 -0500
Subject: [PATCH] add a desktop preview

---
 frontend/src/App.tsx                |  6 ++++--
 frontend/src/components/Preview.tsx | 13 +++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Preview.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 437134b..1b5412c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
+import Preview from "./components/Preview";
 
 function App() {
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
@@ -16,13 +17,14 @@ function App() {
         />
       )}
 
-      <CodePreview content="Hello World" />
-
       {referenceImages.length === 0 && (
         <>
           <ImageUpload setReferenceImages={setReferenceImages} />
         </>
       )}
+
+      <CodePreview content="Hello World" />
+      <Preview />
     </div>
   );
 }
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
new file mode 100644
index 0000000..5cbaf84
--- /dev/null
+++ b/frontend/src/components/Preview.tsx
@@ -0,0 +1,13 @@
+function Preview() {
+  return (
+    <div className="w-[704px]">
+      <iframe
+        title="Iframe Example"
+        srcDoc={"<h1>Hello World</h1>"}
+        className="border-[5px] border-black rounded-[33px] p-4 shadow-lg 
+        transform scale-[0.55] origin-top-left w-[1280px] h-[832px]"
+      ></iframe>
+    </div>
+  );
+}
+export default Preview;