[dyad] Refactoring the image converter - wrote 7 file(s)

2026-01-18 14:11:10 +01:00
parent 3866176416
commit 2dfd3a9ba3
7 changed files with 1037 additions and 580 deletions
--- a/src/components/settings-panel.tsx
+++ b/src/components/settings-panel.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Accordion } from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { RotateCcw, Check } from "lucide-react";
+import { ImageSettings } from "./image-settings";
+import { FilenameSettings } from "./filename-settings";
+import { QualitySettings } from "./quality-settings";
+
+interface SettingsPanelProps {
+  aspectRatio: string;
+  onAspectRatioChange: (value: string) => void;
+  width: number | string;
+  onWidthChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSwapDimensions: () => void;
+  height: number | string;
+  onHeightChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  keepOrientation: boolean;
+  onKeepOrientationChange: (checked: boolean) => void;
+  scaleMode: 'fill' | 'cover' | 'contain';
+  onScaleModeChange: (value: 'fill' | 'cover' | 'contain') => void;
+  objectPosition: string;
+  onObjectPositionChange: (pos: any) => void;
+  useDefaultBaseName: boolean;
+  onUseDefaultBaseNameChange: (checked: boolean) => void;
+  defaultBaseName: string;
+  onDefaultBaseNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onApplyDefaultBaseNameToAll: () => void;
+  hasImages: boolean;
+  prefix: string;
+  onPrefixChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  suffix: string;
+  onSuffixChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  useCounter: boolean;
+  onUseCounterChange: (checked: boolean) => void;
+  counterStart: number;
+  onCounterStartChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  counterDigits: number;
+  onCounterDigitsChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  format: "png" | "jpeg" | "webp";
+  onFormatChange: (value: "png" | "jpeg" | "webp") => void;
+  quality: number;
+  onQualityChange: (value: number) => void;
+  onResetSettings: () => void;
+  onApplySettings: () => void;
+}
+
+export function SettingsPanel(props: SettingsPanelProps) {
+  const t = useTranslations("ImageConverter");
+
+  return (
+    <div className="lg:col-span-1 flex flex-col gap-4 lg:sticky lg:top-8 self-start lg:order-1">
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue="image-settings"
+        className="w-full space-y-4"
+      >
+        <ImageSettings
+          aspectRatio={props.aspectRatio}
+          onAspectRatioChange={props.onAspectRatioChange}
+          width={props.width}
+          onWidthChange={props.onWidthChange}
+          onSwapDimensions={props.onSwapDimensions}
+          height={props.height}
+          onHeightChange={props.onHeightChange}
+          keepOrientation={props.keepOrientation}
+          onKeepOrientationChange={props.onKeepOrientationChange}
+          scaleMode={props.scaleMode}
+          onScaleModeChange={props.onScaleModeChange}
+          objectPosition={props.objectPosition}
+          onObjectPositionChange={props.onObjectPositionChange}
+        />
+        <FilenameSettings
+          useDefaultBaseName={props.useDefaultBaseName}
+          onUseDefaultBaseNameChange={props.onUseDefaultBaseNameChange}
+          defaultBaseName={props.defaultBaseName}
+          onDefaultBaseNameChange={props.onDefaultBaseNameChange}
+          onApplyDefaultBaseNameToAll={props.onApplyDefaultBaseNameToAll}
+          hasImages={props.hasImages}
+          prefix={props.prefix}
+          onPrefixChange={props.onPrefixChange}
+          suffix={props.suffix}
+          onSuffixChange={props.onSuffixChange}
+          useCounter={props.useCounter}
+          onUseCounterChange={props.onUseCounterChange}
+          counterStart={props.counterStart}
+          onCounterStartChange={props.onCounterStartChange}
+          counterDigits={props.counterDigits}
+          onCounterDigitsChange={props.onCounterDigitsChange}
+        />
+        <QualitySettings
+          format={props.format}
+          onFormatChange={props.onFormatChange}
+          quality={props.quality}
+          onQualityChange={props.onQualityChange}
+        />
+      </Accordion>
+      <div className="flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              onClick={props.onResetSettings}
+              className="w-full"
+              variant="outline"
+            >
+              <RotateCcw className="mr-2 h-4 w-4" />
+              {t("resetButton")}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{t("resetButtonTooltip")}</p>
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button onClick={props.onApplySettings} className="w-full">
+              <Check className="mr-2 h-4 w-4" />
+              {t("applyButton")}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{t("applyButtonTooltip")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}