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

src/components/image-converter.tsx

@@ -294,11 +294,28 @@ export function ImageConverter() {
 
   const handleAspectRatioChange = (value: string) => {
     setAspectRatio(value);
-    if (value !== 'custom' && width) {
+
-      const [w, h] = value.split('/').map(Number);
+    if (value === "custom") {
-      const newHeight = Math.round(Number(width) * (h / w));
+      return;
-      setHeight(newHeight);
     }
+
+    const [w, h] = value.split("/").map(Number);
+    let newWidth: number;
+    let newHeight: number;
+
+    if (w > h) {
+      newWidth = 1000;
+      newHeight = Math.round((1000 * h) / w);
+    } else if (h > w) {
+      newHeight = 1000;
+      newWidth = Math.round((1000 * w) / h);
+    } else {
+      newWidth = 1000;
+      newHeight = 1000;
+    }
+
+    setWidth(newWidth);
+    setHeight(newHeight);
   };
 
   const handleWidthChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -315,7 +332,7 @@ export function ImageConverter() {
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full">
-      <div className="lg:col-span-1 flex flex-col gap-8">
+      <div className="lg-col-span-1 flex flex-col gap-8">
         <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
           <AccordionItem value="image-settings" className="border rounded-lg bg-card">
             <AccordionTrigger className="p-6 hover:no-underline">