[dyad] Added button to swap width/height - wrote 1 file(s)

src/components/image-converter.tsx

@@ -17,7 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Upload, Download, X, Trash2, Check } from "lucide-react";
+import { Upload, Download, X, Trash2, Check, ArrowRightLeft } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { Switch } from "@/components/ui/switch";
@@ -333,6 +333,11 @@ export function ImageConverter() {
     setAspectRatio("custom");
   };
 
+  const handleSwapDimensions = () => {
+    setWidth(height);
+    setHeight(width);
+  };
+
   const hasImages = images.length > 0;
 
   return (
@@ -365,12 +370,15 @@ export function ImageConverter() {
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="flex items-end gap-2">
-                  <div className="space-y-2">
+                  <div className="space-y-2 flex-1">
                     <Label htmlFor="width">Width (px)</Label>
                     <Input id="width" type="number" placeholder="Original" value={width} onChange={handleWidthChange} />
                   </div>
-                  <div className="space-y-2">
+                  <Button variant="outline" size="icon" onClick={handleSwapDimensions} className="shrink-0" aria-label="Swap width and height">
+                    <ArrowRightLeft className="h-4 w-4" />
+                  </Button>
+                  <div className="space-y-2 flex-1">
                     <Label htmlFor="height">Height (px)</Label>
                     <Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} />
                   </div>