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 { FilenameSettings } from "./settings/filename-settings";
import { QualitySettings } from "./settings/quality-settings";
import { PresetSettings } from "./settings/preset-settings";
interface SettingsPanelProps {
settings: ConversionSettings;
@@ -24,52 +25,55 @@ export function SettingsPanel({
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">Bildeinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Auflösung und Skalierung für alle Bilder anpassen.</p>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-6">
<ImageSettings
settings={settings}
onSettingsChange={onSettingsChange}
onAspectRatioChange={onAspectRatioChange}
onSwapDimensions={onSwapDimensions}
/>
</AccordionContent>
</AccordionItem>
<div className="space-y-4">
<PresetSettings onSettingsChange={onSettingsChange} />
<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">Bildeinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Auflösung und Skalierung für alle Bilder anpassen.</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">Dateinameneinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Die Ausgabe-Dateinamen anpassen.</p>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-6">
<FilenameSettings
settings={settings}
onSettingsChange={onSettingsChange}
onApplyDefaultBaseNameToAll={onApplyDefaultBaseNameToAll}
hasImages={hasImages}
/>
</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">Dateinameneinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Die Ausgabe-Dateinamen anpassen.</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">Qualitätseinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Format und Komprimierungsstufe auswählen.</p>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-6">
<QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
</AccordionContent>
</AccordionItem>
</Accordion>
<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">Qualitätseinstellungen</h3>
<p className="text-sm text-muted-foreground mt-1">Format und Komprimierungsstufe auswählen.</p>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-6">
<QualitySettings settings={settings} onSettingsChange={onSettingsChange} />
</AccordionContent>
</AccordionItem>
</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>
);
}