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

style: match ToggleGroup style to QR preview (outline variant, h-6 compact items)

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

23
components/animate/AnimationPreview.tsx
View File

@@ -56,9 +56,9 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
<Card className="h-full flex flex-col"> <Card className="h-full flex flex-col">
<CardHeader className="flex flex-row items-center justify-between space-y-0"> <CardHeader className="flex flex-row items-center justify-between space-y-0">
<CardTitle>Preview</CardTitle> <CardTitle>Preview</CardTitle>
<ToggleGroup type="single" value={speed} onValueChange={(v) => v && setSpeed(v)}> <ToggleGroup type="single" value={speed} onValueChange={(v) => v && setSpeed(v)} variant="outline" size="sm">
{SPEEDS.map((s) => ( {SPEEDS.map((s) => (
<ToggleGroupItem key={s.value} value={s.value} size="sm" className="text-xs px-2.5"> <ToggleGroupItem key={s.value} value={s.value} className="h-6 px-1.5 min-w-0 text-[10px]">
{s.label} {s.label}
</ToggleGroupItem> </ToggleGroupItem>
))} ))}
@@ -102,20 +102,15 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
{/* Controls */} {/* Controls */}
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<ToggleGroup <ToggleGroup type="single" value={element} onValueChange={(v) => v && onElementChange(v as PreviewElement)} variant="outline" size="sm">
type="single" <ToggleGroupItem value="box" className="h-6 px-1.5 min-w-0" title="Box">
value={element} <Square className="h-3 w-3" />
onValueChange={(v) => v && onElementChange(v as PreviewElement)}
className="gap-1"
>
<ToggleGroupItem value="box" size="sm" title="Box">
<Square className="h-3.5 w-3.5" />
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem value="circle" size="sm" title="Circle"> <ToggleGroupItem value="circle" className="h-6 px-1.5 min-w-0" title="Circle">
<Circle className="h-3.5 w-3.5" /> <Circle className="h-3 w-3" />
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem value="text" size="sm" title="Text"> <ToggleGroupItem value="text" className="h-6 px-1.5 min-w-0" title="Text">
<Type className="h-3.5 w-3.5" /> <Type className="h-3 w-3" />
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>