pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Adding a presets dropdown to settings - wrote 2 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-19 08:11:45 +01:00
parent c208fabcb9
commit d39ddd0540
2 changed files with 116 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/settings-panel.tsx
View File

@@ -5,6 +5,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/
import { ImageSettings } from "./settings/image-settings"; import { ImageSettings } from "./settings/image-settings";
import { FilenameSettings } from "./settings/filename-settings"; import { FilenameSettings } from "./settings/filename-settings";
import { QualitySettings } from "./settings/quality-settings"; import { QualitySettings } from "./settings/quality-settings";
import { PresetSettings } from "./settings/preset-settings";
interface SettingsPanelProps { interface SettingsPanelProps {
settings: ConversionSettings; settings: ConversionSettings;
@@ -24,52 +25,55 @@ export function SettingsPanel({
hasImages, hasImages,
}: SettingsPanelProps) { }: SettingsPanelProps) {
return ( return (
<Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4"> <div className="space-y-4">
<AccordionItem value="image-settings" className="border rounded-lg bg-card"> <PresetSettings onSettingsChange={onSettingsChange} />
<AccordionTrigger className="p-6 hover:no-underline"> <Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-4">
<div className="text-left"> <AccordionItem value="image-settings" className="border rounded-lg bg-card">
<h3 className="text-lg font-medium leading-none">Bildeinstellungen</h3> <AccordionTrigger className="p-6 hover:no-underline">
<p className="text-sm text-muted-foreground mt-1">Auflösung und Skalierung für alle Bilder anpassen.</p> <div className="text-left">
</div> <h3 className="text-lg font-medium leading-none">Bildeinstellungen</h3>
</AccordionTrigger> <p className="text-sm text-muted-foreground mt-1">Auflösung und Skalierung für alle Bilder anpassen.</p>
<AccordionContent className="px-6 pb-6"> </div>
<ImageSettings </AccordionTrigger>
settings={settings} <AccordionContent className="px-6 pb-6">
onSettingsChange={onSettingsChange} <ImageSettings
onAspectRatioChange={onAspectRatioChange} settings={settings}
onSwapDimensions={onSwapDimensions} onSettingsChange={onSettingsChange}
/> onAspectRatioChange={onAspectRatioChange}
</AccordionContent> onSwapDimensions={onSwapDimensions}
</AccordionItem> />
</AccordionContent>
</AccordionItem>
<AccordionItem value="filename-settings" className="border rounded-lg bg-card"> <AccordionItem value="filename-settings" className="border rounded-lg bg-card">
<AccordionTrigger className="p-6 hover:no-underline"> <AccordionTrigger className="p-6 hover:no-underline">
<div className="text-left"> <div className="text-left">
<h3 className="text-lg font-medium leading-none">Dateinameneinstellungen</h3> <h3 className="text-lg font-medium leading-none">Dateinameneinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Die Ausgabe-Dateinamen anpassen.</p> <p className="text-sm text-muted-foreground mt-1">Die Ausgabe-Dateinamen anpassen.</p>
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="px-6 pb-6"> <AccordionContent className="px-6 pb-6">
<FilenameSettings <FilenameSettings
settings={settings} settings={settings}
onSettingsChange={onSettingsChange} onSettingsChange={onSettingsChange}
onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll} onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll}
hasImages={hasImages} hasImages={hasImages}
/> />
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
<AccordionItem value="quality-settings" className="border rounded-lg bg-card"> <AccordionItem value="quality-settings" className="border rounded-lg bg-card">
<AccordionTrigger className="p-6 hover:no-underline"> <AccordionTrigger className="p-6 hover:no-underline">
<div className="text-left"> <div className="text-left">
<h3 className="text-lg font-medium leading-none">Qualitätseinstellungen</h3> <h3 className="text-lg font-medium leading-none">Qualitätseinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Format und Komprimierungsstufe auswählen.</p> <p className="text-sm text-muted-foreground mt-1">Format und Komprimierungsstufe auswählen.</p>
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="px-6 pb-6"> <AccordionContent className="px-6 pb-6">
<QualitySettings settings={settings} onSettingsChange={onSettingsChange} /> <QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
</div>
); );
} }

67
src/components/settings/preset-settings.tsx Normal file
View File

@@ -0,0 +1,67 @@
"use client";
import { ConversionSettings } from "@/types";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { toast } from "sonner";
type Preset = {
name: string;
settings: Partial<ConversionSettings>;
};
const presets: Preset[] = [
{
name: "Header",
settings: { width: "1920", height: "1080", quality: 100, scaleMode: 'cover', objectPosition: 'center center', aspectRatio: '16/9' },
},
{
name: "Normal",
settings: { width: "1000", height: "700", quality: 80, scaleMode: 'cover', objectPosition: 'center center', aspectRatio: 'custom' },
},
{
name: "Background",
settings: { width: "1500", height: "1500", quality: 90, scaleMode: 'cover', objectPosition: 'center center', aspectRatio: '1/1' },
},
];
interface PresetSettingsProps {
onSettingsChange: (settings: Partial<ConversionSettings>) => void;
}
export function PresetSettings({ onSettingsChange }: PresetSettingsProps) {
const handlePresetSelect = (presetName: string) => {
const selectedPreset = presets.find(p => p.name === presetName);
if (selectedPreset) {
onSettingsChange(selectedPreset.settings);
toast.success(`Preset "${selectedPreset.name}" angewendet.`);
}
};
return (
<Card>
<CardHeader>
<CardTitle className="text-lg font-medium leading-none">Presets</CardTitle>
<p className="text-sm text-muted-foreground mt-1">Schnell gängige Einstellungen anwenden.</p>
</CardHeader>
<CardContent>
<div className="space-y-2">
<Label htmlFor="presets">Preset auswählen</Label>
<Select onValueChange={handlePresetSelect}>
<SelectTrigger id="presets">
<SelectValue placeholder="Preset auswählen..." />
</SelectTrigger>
<SelectContent>
{presets.map((preset) => (
<SelectItem key={preset.name} value={preset.name}>
{preset.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
);
}