Sebastian Krüger
998ac641f9
Shared components (components/ui/): - slider-row.tsx: SliderRow — label + display value + Slider, replaces inline slider blocks in FileConverter, QROptions - color-input.tsx: ColorInput — color swatch + hex text input pair, replaces repeated inline patterns in QROptions, KeyframeProperties, FaviconGenerator Media tool (FileConverter.tsx): - Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem - Replace with native <select> + selectCls (matches AnimationSettings and all other tools) - Use SliderRow for video/audio bitrate and image quality sliders - Net: -6 shadcn Select trees, consistent with every other tool QROptions.tsx: - Use SliderRow for margin slider (remove raw Slider import) - Use ColorInput for foreground + background color pairs KeyframeProperties.tsx: - Use ColorInput for background color pair (keep local SliderRow which has a different layout with number input) FaviconGenerator.tsx: - Use ColorInput for background + theme color pairs AnimationSettings.tsx: - Remove dead bg-[#1a1a2e] per-option className (global CSS handles select option styling via bg-popover) Delete: - components/media/ConversionOptions.tsx — dead code (no imports), contained the shadcn Label/Input/Select/Slider patterns being replaced Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { Slider } from '@/components/ui/slider';
|
|
|
|
interface SliderRowProps {
|
|
label: string;
|
|
display: string;
|
|
value: number;
|
|
min: number;
|
|
max: number;
|
|
step?: number;
|
|
onChange: (v: number) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Shared label+display header + Slider.
|
|
* For the keyframe editor's slider+number-input variant, use the local SliderRow in KeyframeProperties.tsx.
|
|
*/
|
|
export function SliderRow({ label, display, value, min, max, step = 1, onChange, disabled }: SliderRowProps) {
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
|
|
{label}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{display}</span>
|
|
</div>
|
|
<Slider
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={[value]}
|
|
onValueChange={([v]) => onChange(v)}
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|