[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)]">
-      <main className="flex flex-col items-center w-full max-w-2xl z-10">
+    <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-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,32 +92,94 @@ export function ImageConverter() {
   };
 
   return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Image Settings</CardTitle>
-        <CardDescription>
-          Adjust the resolution and format for your export.
-        </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 className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
+      {/* Left Column: Settings */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Image Settings</CardTitle>
+          <CardDescription>
+            Adjust the resolution and format for your export.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="width">Width (px)</Label>
+              <Input
+                id="width"
+                type="number"
+                placeholder="e.g., 1920"
+                value={width}
+                onChange={(e) => setWidth(e.target.value)}
+                disabled={!image}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="height">Height (px)</Label>
+              <Input
+                id="height"
+                type="number"
+                placeholder="e.g., 1080"
+                value={height}
+                onChange={(e) => setHeight(e.target.value)}
+                disabled={!image}
+              />
+            </div>
           </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="format">Format</Label>
+            <Select
+              value={format}
+              onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}
+              disabled={!image}
+            >
+              <SelectTrigger id="format">
+                <SelectValue placeholder="Select format" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="png">PNG</SelectItem>
+                <SelectItem value="jpeg">JPEG</SelectItem>
+                <SelectItem value="webp">WEBP</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button
+            variant="outline"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            {image ? "Change Image" : "Upload Image"}
+          </Button>
+          <Button
+            onClick={handleConvertAndDownload}
+            disabled={!image || isConverting}
+          >
+            <Download className="mr-2 h-4 w-4" />
+            {isConverting ? "Converting..." : "Convert & Download"}
+          </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 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"
+            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}
@@ -125,66 +187,7 @@ export function ImageConverter() {
           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>
-            <Input
-              id="width"
-              type="number"
-              placeholder="e.g., 1920"
-              value={width}
-              onChange={(e) => setWidth(e.target.value)}
-              disabled={!image}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="height">Height (px)</Label>
-            <Input
-              id="height"
-              type="number"
-              placeholder="e.g., 1080"
-              value={height}
-              onChange={(e) => setHeight(e.target.value)}
-              disabled={!image}
-            />
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="format">Format</Label>
-          <Select
-            value={format}
-            onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}
-            disabled={!image}
-          >
-            <SelectTrigger id="format">
-              <SelectValue placeholder="Select format" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="png">PNG</SelectItem>
-              <SelectItem value="jpeg">JPEG</SelectItem>
-              <SelectItem value="webp">WEBP</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button
-          variant="outline"
-          onClick={() => fileInputRef.current?.click()}
-        >
-          <Upload className="mr-2 h-4 w-4" />
-          {image ? "Change Image" : "Upload Image"}
-        </Button>
-        <Button
-          onClick={handleConvertAndDownload}
-          disabled={!image || isConverting}
-        >
-          <Download className="mr-2 h-4 w-4" />
-          {isConverting ? "Converting..." : "Convert & Download"}
-        </Button>
-      </CardFooter>
-    </Card>
+      </div>
+    </div>
   );
 }