valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: move units into label text in KeyframeProperties SliderRow

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-02-28 17:33:03 +01:00
parent 0e95b7e543
commit d0e8ae322f
1 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/animate/KeyframeProperties.tsx
View File

@@ -29,7 +29,9 @@ function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderR
return ( return (
<div className="grid grid-cols-[1fr_auto] gap-x-3 items-center"> <div className="grid grid-cols-[1fr_auto] gap-x-3 items-center">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[10px] text-muted-foreground">{label}</Label> <Label className="text-[10px] text-muted-foreground">
{label}{unit && <span className="text-muted-foreground/50 ml-0.5">{unit}</span>}
</Label>
<Slider <Slider
min={min} min={min}
max={max} max={max}
@@ -38,18 +40,15 @@ function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderR
onValueChange={([v]) => onChange(v)} onValueChange={([v]) => onChange(v)}
/> />
</div> </div>
<div className="flex items-center gap-0.5 pt-4"> <Input
<Input type="number"
type="number" min={min}
min={min} max={max}
max={max} step={step}
step={step} value={value}
value={value} onChange={(e) => onChange(Number(e.target.value))}
onChange={(e) => onChange(Number(e.target.value))} className="w-16 text-xs px-1.5 h-7 mt-4"
className="w-16 text-xs px-1.5 h-7" />
/>
{unit && <span className="text-[10px] text-muted-foreground">{unit}</span>}
</div>
</div> </div>
); );
} }