[dyad] Refactored image converter - wrote 8 file(s)

2026-01-18 12:52:56 +01:00
parent a64ce49523
commit 9ba9b13e21
8 changed files with 1168 additions and 826 deletions
--- a/src/components/image-converter/settings-panel.tsx
+++ b/src/components/image-converter/settings-panel.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Check } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ImageSettings } from "./image-settings";
+import { FilenameSettings } from "./filename-settings";
+import { QualitySettings } from "./quality-settings";
+import { useImageConverter } from "@/hooks/use-image-converter";
+
+type SettingsPanelProps = ReturnType<typeof useImageConverter>;
+
+export function SettingsPanel(props: SettingsPanelProps) {
+  const t = useTranslations("ImageConverter");
+  const hasImages = props.images.length > 0;
+
+  return (
+    <div className="lg:col-span-1 flex flex-col gap-4 lg:sticky lg:top-8 self-start">
+      <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">{t("imageSettingsTitle")}</h3>
+              <p className="text-sm text-muted-foreground mt-1">{t("imageSettingsDescription")}</p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6">
+            <ImageSettings
+              aspectRatio={props.aspectRatio}
+              onAspectRatioChange={props.handleAspectRatioChange}
+              width={props.width}
+              onWidthChange={props.handleWidthChange}
+              height={props.height}
+              onHeightChange={props.handleHeightChange}
+              onSwapDimensions={props.handleSwapDimensions}
+              keepOrientation={props.keepOrientation}
+              onKeepOrientationChange={props.setKeepOrientation}
+              scaleMode={props.scaleMode}
+              onScaleModeChange={props.setScaleMode}
+              objectPosition={props.objectPosition}
+              onObjectPositionChange={props.setObjectPosition}
+            />
+          </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">{t("filenameSettingsTitle")}</h3>
+              <p className="text-sm text-muted-foreground mt-1">{t("filenameSettingsDescription")}</p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6">
+            <FilenameSettings
+              useDefaultBaseName={props.useDefaultBaseName}
+              onUseDefaultBaseNameChange={props.setUseDefaultBaseName}
+              defaultBaseName={props.defaultBaseName}
+              onDefaultBaseNameChange={(e) => props.setDefaultBaseName(e.target.value)}
+              onApplyDefaultBaseNameToAll={props.handleApplyDefaultBaseNameToAll}
+              prefix={props.prefix}
+              onPrefixChange={(e) => props.setPrefix(e.target.value)}
+              suffix={props.suffix}
+              onSuffixChange={(e) => props.setSuffix(e.target.value)}
+              useCounter={props.useCounter}
+              onUseCounterChange={props.setUseCounter}
+              counterStart={props.counterStart}
+              onCounterStartChange={(e) => props.setCounterStart(Math.max(0, Number(e.target.value)))}
+              counterDigits={props.counterDigits}
+              onCounterDigitsChange={(e) => props.setCounterDigits(Math.max(1, Number(e.target.value)))}
+              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">{t("qualitySettingsTitle")}</h3>
+              <p className="text-sm text-muted-foreground mt-1">{t("qualitySettingsDescription")}</p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-6 pb-6">
+            <QualitySettings
+              format={props.format}
+              onFormatChange={props.setFormat}
+              quality={props.quality}
+              onQualityChange={(value) => props.setQuality(value[0])}
+            />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            onClick={props.handleApplySettings}
+            disabled={!hasImages}
+            className="w-full"
+          >
+            <Check className="mr-2 h-4 w-4" />
+            {t("applySettings")}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{t("applySettingsTooltip")}</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}