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

src/components/settings-panel.tsx

@@ -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,6 +25,8 @@ export function SettingsPanel({
   hasImages,
 }: SettingsPanelProps) {
   return (
+    <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">
@@ -71,5 +74,6 @@ export function SettingsPanel({
           </AccordionContent>
         </AccordionItem>
       </Accordion>
+    </div>
   );
 }

src/components/settings/preset-settings.tsx

@@ -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>
+  );
+}