[dyad] Added aspect ratio presets - wrote 1 file(s)

src/components/image-converter.tsx

@@ -31,12 +31,21 @@ import {
 import { Slider } from "@/components/ui/slider";
 import { ObjectPositionControl } from "./object-position-control";
 
+const aspectRatios = [
+  { name: "Custom", value: "custom" },
+  { name: "1:1 (Square)", value: "1/1" },
+  { name: "4:3 (Standard)", value: "4/3" },
+  { name: "3:2 (Photography)", value: "3/2" },
+  { name: "16:9 (Widescreen)", value: "16/9" },
+];
+
 export function ImageConverter() {
   const [images, setImages] = useState<File[]>([]);
   const [previewUrls, setPreviewUrls] = useState<string[]>([]);
   const [filenames, setFilenames] = useState<string[]>([]);
   const [width, setWidth] = useState<number | string>("");
   const [height, setHeight] = useState<number | string>("");
+  const [aspectRatio, setAspectRatio] = useState<string>("custom");
   const [format, setFormat] = useState<"png" | "jpeg" | "webp">("webp");
   const [quality, setQuality] = useState<number>(90);
   
@@ -283,6 +292,25 @@ export function ImageConverter() {
     toast.info("Settings updated and will be used for all downloads.");
   };
 
+  const handleAspectRatioChange = (value: string) => {
+    setAspectRatio(value);
+    if (value !== 'custom' && width) {
+      const [w, h] = value.split('/').map(Number);
+      const newHeight = Math.round(Number(width) * (h / w));
+      setHeight(newHeight);
+    }
+  };
+
+  const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setWidth(e.target.value);
+    setAspectRatio("custom");
+  };
+
+  const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setHeight(e.target.value);
+    setAspectRatio("custom");
+  };
+
   const hasImages = images.length > 0;
 
   return (
@@ -299,14 +327,31 @@ export function ImageConverter() {
               </div>
             </AccordionTrigger>
             <AccordionContent className="px-6 pb-6">
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-4">
-                <div className="space-y-2">
+                <div>
-                  <Label htmlFor="width">Width (px)</Label>
+                  <Label htmlFor="aspect-ratio">Aspect Ratio</Label>
-                  <Input id="width" type="number" placeholder="Original" value={width} onChange={(e) => setWidth(e.target.value)} />
+                  <Select value={aspectRatio} onValueChange={handleAspectRatioChange}>
+                    <SelectTrigger id="aspect-ratio" className="mt-2">
+                      <SelectValue placeholder="Select aspect ratio" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {aspectRatios.map((ratio) => (
+                        <SelectItem key={ratio.value} value={ratio.value}>
+                          {ratio.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
-                <div className="space-y-2">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <Label htmlFor="height">Height (px)</Label>
+                  <div className="space-y-2">
-                  <Input id="height" type="number" placeholder="Original" value={height} onChange={(e) => setHeight(e.target.value)} />
+                    <Label htmlFor="width">Width (px)</Label>
+                    <Input id="width" type="number" placeholder="Original" value={width} onChange={handleWidthChange} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="height">Height (px)</Label>
+                    <Input id="height" type="number" placeholder="Original" value={height} onChange={handleHeightChange} />
+                  </div>
                 </div>
               </div>
               <div className="mt-4 space-y-2">