68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
|
'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/utils/formatPresets';
|
||
|
|
import type { ConversionFormat } from '@/types/conversion';
|
||
|
|
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|