120 lines
5.0 KiB
TypeScript
120 lines
5.0 KiB
TypeScript
"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>
|
|
);
|
|
} |