File size: 1,724 Bytes
2bc6d22 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import React from 'react';
import type { OutputType, CompressionOptions } from '../types';
interface CompressionOptionsProps {
options: CompressionOptions;
outputType: OutputType;
onOptionsChange: (options: CompressionOptions) => void;
onOutputTypeChange: (type: OutputType) => void;
}
export function CompressionOptions({
options,
outputType,
onOptionsChange,
onOutputTypeChange,
}: CompressionOptionsProps) {
return (
<div className="space-y-6 bg-white p-6 rounded-lg shadow-sm">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Output Format
</label>
<div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
{(['avif', 'jpeg', 'jxl', 'png', 'webp'] as const).map((format) => (
<button
key={format}
className={`px-4 py-2 rounded-md text-sm font-medium uppercase ${
outputType === format
? 'bg-blue-500 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
onClick={() => onOutputTypeChange(format)}
>
{format}
</button>
))}
</div>
</div>
{outputType !== 'png' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Quality: {options.quality}%
</label>
<input
type="range"
min="1"
max="100"
value={options.quality}
onChange={(e) =>
onOptionsChange({ quality: Number(e.target.value) })
}
className="w-full"
/>
</div>
)}
</div>
);
} |