From 5a8d7d90716713d5ca26b4365a123e57ecd48c03 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 13:33:06 -0500
Subject: [PATCH] add a CodePreview element

---
 frontend/src/App.tsx                    |  9 ++++++---
 frontend/src/components/CodePreview.tsx | 27 +++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/CodePreview.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ba76b1e..437134b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,12 +1,13 @@
 import { useState } from "react";
 import ImageUpload from "./components/ImageUpload";
+import CodePreview from "./components/CodePreview";
 
 function App() {
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
 
   return (
-    <>
-      <h1 className="text-2xl">Drag & Drop a Screenshot</h1>
+    <div className="mx-auto mt-10 max-w-2xl">
+      <h1 className="text-2xl mb-4">Drag & Drop a Screenshot</h1>
       {referenceImages.length > 0 && (
         <img
           className="w-[300px]"
@@ -15,12 +16,14 @@ function App() {
         />
       )}
 
+      <CodePreview content="Hello World" />
+
       {referenceImages.length === 0 && (
         <>
           <ImageUpload setReferenceImages={setReferenceImages} />
         </>
       )}
-    </>
+    </div>
   );
 }
 
diff --git a/frontend/src/components/CodePreview.tsx b/frontend/src/components/CodePreview.tsx
new file mode 100644
index 0000000..e906278
--- /dev/null
+++ b/frontend/src/components/CodePreview.tsx
@@ -0,0 +1,27 @@
+import { useRef, useEffect } from "react";
+
+interface Props {
+  content: string;
+}
+
+function CodePreview({ content }: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [content]);
+
+  return (
+    <div
+      ref={scrollRef}
+      className="w-full px-2 bg-black text-green-400 whitespace-nowrap flex 
+      overflow-x-auto font-mono text-[10px]"
+    >
+      {content}
+    </div>
+  );
+}
+
+export default CodePreview;