add a CodePreview element

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>
   );
 }
 

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;