[dyad] Refactoring the app for modularity - wrote 12 file(s)

2026-01-18 16:22:20 +01:00
parent 69a9b62da8
commit d33dceb08c
12 changed files with 1052 additions and 889 deletions
--- a/src/components/settings-panel.tsx
+++ b/src/components/settings-panel.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { ConversionSettings } from "@/types";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { ImageSettings } from "./settings/image-settings";
+import { FilenameSettings } from "./settings/filename-settings";
+import { QualitySettings } from "./settings/quality-settings";
+
+interface SettingsPanelProps {
+  settings: ConversionSettings;
+  onSettingsChange: (settings: Partial<ConversionSettings>) => void;
+  onAspectRatioChange: (value: string) => void;
+  onSwapDimensions: () => void;
+  onApplyDefaultBaseNameToAll: () => void;
+  hasImages: boolean;
+}
+
+export function SettingsPanel({
+  settings,
+  onSettingsChange,
+  onAspectRatioChange,
+  onSwapDimensions,
+  onApplyDefaultBaseNameToAll,
+  hasImages,
+}: SettingsPanelProps) {
+  return (
+    <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4">
+      <AccordionItem value="image-settings" className="border rounded-lg bg-card">
+        <AccordionTrigger className="p-6 hover:no-underline">
+          <div className="text-left">
+            <h3 className="text-lg font-medium leading-none">Image Settings</h3>
+            <p className="text-sm text-muted-foreground mt-1">Adjust resolution and scaling for all images.</p>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="px-6 pb-6">
+          <ImageSettings
+            settings={settings}
+            onSettingsChange={onSettingsChange}
+            onAspectRatioChange={onAspectRatioChange}
+            onSwapDimensions={onSwapDimensions}
+          />
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="filename-settings" className="border rounded-lg bg-card">
+        <AccordionTrigger className="p-6 hover:no-underline">
+          <div className="text-left">
+            <h3 className="text-lg font-medium leading-none">Filename Settings</h3>
+            <p className="text-sm text-muted-foreground mt-1">Customize the output filenames.</p>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="px-6 pb-6">
+          <FilenameSettings
+            settings={settings}
+            onSettingsChange={onSettingsChange}
+            onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll}
+            hasImages={hasImages}
+          />
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="quality-settings" className="border rounded-lg bg-card">
+        <AccordionTrigger className="p-6 hover:no-underline">
+          <div className="text-left">
+            <h3 className="text-lg font-medium leading-none">Quality Settings</h3>
+            <p className="text-sm text-muted-foreground mt-1">Choose format and compression level.</p>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className="px-6 pb-6">
+          <QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}