refactor: centralize action/icon button styles across all tools

Extract shared actionBtn and iconBtn constants into lib/utils/styles.ts
and replace all 11 local definitions across tool components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-03 10:26:53 +01:00
parent a1dcfa34dc
commit 3305b12c02
13 changed files with 37 additions and 48 deletions

View File

@@ -2,7 +2,7 @@
import { useEffect, useRef, useState } from 'react';
import { Play, Pause, RotateCcw, Square, Circle, Type } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { cn, iconBtn } from '@/lib/utils';
import { buildCSS } from '@/lib/animate/cssBuilder';
import type { AnimationConfig, PreviewElement } from '@/types/animate';
@@ -27,7 +27,7 @@ const ELEMENTS: { value: PreviewElement; icon: React.ReactNode; title: string }[
{ value: 'text', icon: <Type className="w-3 h-3" />, title: 'Text' },
];
const actionBtn = 'flex items-center justify-center w-7 h-7 glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
const previewBtn = cn(iconBtn, 'w-7 h-7');
const pillCls = (active: boolean) =>
cn(
@@ -138,7 +138,7 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
onClick={() => animState === 'ended' ? restart() : setAnimState('playing')}
disabled={animState === 'playing'}
title={animState === 'ended' ? 'Replay' : 'Play'}
className={actionBtn}
className={previewBtn}
>
<Play className="w-3 h-3" />
</button>
@@ -146,11 +146,11 @@ export function AnimationPreview({ config, element, onElementChange }: Props) {
onClick={() => setAnimState('paused')}
disabled={animState !== 'playing'}
title="Pause"
className={actionBtn}
className={previewBtn}
>
<Pause className="w-3 h-3" />
</button>
<button onClick={restart} title="Restart" className={actionBtn}>
<button onClick={restart} title="Restart" className={previewBtn}>
<RotateCcw className="w-3 h-3" />
</button>
</div>