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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user