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">
<CardHeader className="flex flex-row items-center justify-between space-y-0">
<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) => (
<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}
</ToggleGroupItem>
))}
@@ -102,20 +102,15 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
{/* Controls */}
<div className="flex items-center justify-between gap-3">
<ToggleGroup
type="single"
value={element}
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" />
<ToggleGroup type="single" value={element} onValueChange={(v) => v && onElementChange(v as PreviewElement)} variant="outline" size="sm">
<ToggleGroupItem value="box" className="h-6 px-1.5 min-w-0" title="Box">
<Square className="h-3 w-3" />
</ToggleGroupItem>
<ToggleGroupItem value="circle" size="sm" title="Circle">
<Circle className="h-3.5 w-3.5" />
<ToggleGroupItem value="circle" className="h-6 px-1.5 min-w-0" title="Circle">
<Circle className="h-3 w-3" />
</ToggleGroupItem>
<ToggleGroupItem value="text" size="sm" title="Text">
<Type className="h-3.5 w-3.5" />
<ToggleGroupItem value="text" className="h-6 px-1.5 min-w-0" title="Text">
<Type className="h-3 w-3" />
</ToggleGroupItem>
</ToggleGroup>