support desktop and mobile preview

frontend/src/App.tsx

@@ -5,7 +5,13 @@ import Preview from "./components/Preview";
 import { CodeGenerationParams, generateCode } from "./generateCode";
 import Spinner from "./components/Spinner";
 import classNames from "classnames";
-import { FaCode, FaDownload, FaEye, FaUndo } from "react-icons/fa";
+import {
+  FaCode,
+  FaDesktop,
+  FaDownload,
+  FaMobile,
+  FaUndo,
+} from "react-icons/fa";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
@@ -83,7 +89,7 @@ function App() {
   }
 
   return (
-    <div className="mt-6">
+    <div className="mt-2">
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
         <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
           <h1 className="text-2xl mt-10">Screenshot to Code</h1>
@@ -181,11 +187,14 @@ function App() {
 
         {(appState === "CODING" || appState === "CODE_READY") && (
           <div className="ml-4">
-            <Tabs defaultValue="preview">
-              <div className="flex justify-end mr-8">
+            <Tabs defaultValue="desktop">
+              <div className="flex justify-end mr-8 mb-4">
                 <TabsList>
-                  <TabsTrigger value="preview" className="flex gap-x-2">
-                    <FaEye /> Preview
+                  <TabsTrigger value="desktop" className="flex gap-x-2">
+                    <FaDesktop /> Desktop
+                  </TabsTrigger>
+                  <TabsTrigger value="mobile" className="flex gap-x-2">
+                    <FaMobile /> Mobile
                   </TabsTrigger>
                   <TabsTrigger value="code" className="flex gap-x-2">
                     <FaCode />
@@ -193,8 +202,11 @@ function App() {
                   </TabsTrigger>
                 </TabsList>
               </div>
-              <TabsContent value="preview">
-                <Preview code={generatedCode} />
+              <TabsContent value="desktop">
+                <Preview code={generatedCode} device="desktop" />
+              </TabsContent>
+              <TabsContent value="mobile">
+                <Preview code={generatedCode} device="mobile" />
               </TabsContent>
               <TabsContent value="code">
                 <CodeMirror code={generatedCode} />

frontend/src/components/CodeMirror.tsx

@@ -60,6 +60,6 @@ function CodeMirror({ code }: Props) {
     }
   }, [code]);
 
-  return <div className="overflow-x-scroll overflow-y-scroll" ref={ref} />;
+  return <div className="overflow-x-scroll overflow-y-scroll mx-2" ref={ref} />;
 }
 export default CodeMirror;

frontend/src/components/Preview.tsx

@@ -1,19 +1,27 @@
+import classNames from "classnames";
 import useThrottle from "../hooks/useThrottle";
 
 interface Props {
   code: string;
+  device: "mobile" | "desktop";
 }
 
-function Preview({ code }: Props) {
+function Preview({ code, device }: Props) {
   const throttledCode = useThrottle(code, 200);
 
   return (
-    <div className="w-[704px]">
+    <div className="flex justify-center mx-2">
       <iframe
         title="Preview"
         srcDoc={throttledCode}
-        className="border-[4px] border-black rounded-[20px] shadow-lg 
-        transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
+        className={classNames(
+          "border-[4px] border-black rounded-[20px] shadow-lg",
+          "transform scale-[0.9] origin-top",
+          {
+            "w-full h-[832px]": device === "desktop",
+            "w-[400px] h-[832px]": device === "mobile",
+          }
+        )}
       ></iframe>
     </div>
   );