1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-12-24 05:14:57 +01:00
upscayl/renderer/components/settings-tab/CompressionInput.tsx

37 lines
1.0 KiB
TypeScript
Raw Normal View History

type CompressionInputProps = {
2023-09-13 16:07:45 +02:00
compression: number;
handleCompressionChange: (arg: any) => void;
};
export function CompressionInput({
2023-09-13 16:07:45 +02:00
compression,
handleCompressionChange,
}: CompressionInputProps) {
return (
<div className="flex flex-col gap-2">
2023-08-30 06:54:16 +02:00
<div className="flex gap-1 text-sm font-medium uppercase">
2023-09-13 16:07:45 +02:00
<p className="shrink-0">Image Compression ({compression}%)</p>
2023-08-30 06:54:16 +02:00
<p className="badge-primary badge text-[10px] font-medium">
EXPERIMENTAL
</p>
</div>
2023-11-23 06:39:46 +01:00
{compression > 0 && (
<p className="text-xs text-base-content/80">
This option can cause color issues with some images. For PNGs, if you
use compression, they'll use indexed colors. Keep compression to 0 for
PNGs for lossless quality.
</p>
)}
<input
type="range"
placeholder="Type here"
className="range range-primary w-full max-w-xs"
min={0}
max={100}
2023-09-13 16:07:45 +02:00
value={compression}
onChange={handleCompressionChange}
/>
</div>
);
}