feat: add media converter app and fix compilation errors

components/media/FormatPresets.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import { Sparkles } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
+import { getPresetsByCategory, type FormatPreset } from '@/lib/media/utils/formatPresets';
+import type { ConversionFormat } from '@/types/media';
+
+interface FormatPresetsProps {
+  inputFormat: ConversionFormat;
+  onPresetSelect: (preset: FormatPreset) => void;
+  disabled?: boolean;
+}
+
+export function FormatPresets({ inputFormat, onPresetSelect, disabled = false }: FormatPresetsProps) {
+  const [selectedPresetId, setSelectedPresetId] = React.useState<string | null>(null);
+
+  // Get presets for the input format's category
+  const presets = getPresetsByCategory(inputFormat.category);
+
+  if (presets.length === 0) {
+    return null;
+  }
+
+  const handlePresetClick = (preset: FormatPreset) => {
+    setSelectedPresetId(preset.id);
+    onPresetSelect(preset);
+  };
+
+  return (
+    <Card className="p-4">
+      <div className="flex items-center gap-2 mb-4">
+        <Sparkles className="h-5 w-5 text-primary" />
+        <h3 className="text-sm font-semibold">Quick Presets</h3>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {presets.map((preset) => (
+          <Button
+            key={preset.id}
+            onClick={() => handlePresetClick(preset)}
+            variant={selectedPresetId === preset.id ? 'default' : 'outline'}
+            className={cn(
+              'h-auto py-4 px-4 flex flex-col items-start text-left gap-2',
+              selectedPresetId === preset.id && 'ring-2 ring-primary ring-offset-2'
+            )}
+            disabled={disabled}
+          >
+            <div className="flex items-center gap-2 w-full">
+              <span className="text-2xl">{preset.icon}</span>
+              <div className="flex-1 min-w-0">
+                <div className="font-semibold text-sm">{preset.name}</div>
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground w-full">{preset.description}</p>
+          </Button>
+        ))}
+      </div>
+
+      <div className="mt-3 text-xs text-muted-foreground">
+        Select a preset to automatically configure optimal settings for your use case
+      </div>
+    </Card>
+  );
+}