[dyad] Update layout to two columns - wrote 2 file(s)

src/app/page.tsx

@@ -3,8 +3,8 @@ import { MadeWithDyad } from "@/components/made-with-dyad";
 
 export default function Home() {
   return (
-    <div className="relative flex flex-col items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
+    <div className="relative flex flex-col items-center justify-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col items-center w-full max-w-2xl z-10">
+      <main className="flex flex-col items-center w-full max-w-6xl z-10">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
             Image Web Exporter

src/components/image-converter.tsx

@@ -92,7 +92,9 @@ export function ImageConverter() {
   };
 
   return (
-    <Card className="w-full">
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
+      {/* Left Column: Settings */}
+      <Card>
         <CardHeader>
           <CardTitle>Image Settings</CardTitle>
           <CardDescription>
@@ -100,32 +102,6 @@ export function ImageConverter() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-        {previewUrl ? (
-          <div className="w-full aspect-video rounded-md overflow-hidden border flex items-center justify-center bg-gray-100 dark:bg-gray-800">
-            <img
-              src={previewUrl}
-              alt="Image preview"
-              className="max-w-full max-h-full object-contain"
-            />
-          </div>
-        ) : (
-          <div
-            className="w-full aspect-video rounded-md border-2 border-dashed flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
-            onClick={() => fileInputRef.current?.click()}
-          >
-            <ImageIcon className="w-12 h-12 mb-2" />
-            <span>Click to upload an image</span>
-          </div>
-        )}
-
-        <Input
-          type="file"
-          ref={fileInputRef}
-          onChange={handleImageChange}
-          className="hidden"
-          accept="image/*"
-        />
-
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="width">Width (px)</Label>
@@ -186,5 +162,32 @@ export function ImageConverter() {
           </Button>
         </CardFooter>
       </Card>
+
+      {/* Right Column: Preview */}
+      <div className="w-full aspect-video rounded-md border flex items-center justify-center bg-gray-100 dark:bg-gray-800 relative">
+        {previewUrl ? (
+          <img
+            src={previewUrl}
+            alt="Image preview"
+            className="max-w-full max-h-full object-contain"
+          />
+        ) : (
+          <div
+            className="w-full h-full border-2 border-dashed rounded-md flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <ImageIcon className="w-12 h-12 mb-2" />
+            <span>Click to upload an image</span>
+          </div>
+        )}
+        <Input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleImageChange}
+          className="hidden"
+          accept="image/*"
+        />
+      </div>
+    </div>
   );
 }