mirror of
https://github.com/dergigi/boris.git
synced 2025-12-25 10:34:28 +01:00
e4b0d6d1cd
- Convert HighlightsPanel buttons to use IconButton component - Add style prop support to IconButton for custom styling - Remove redundant CSS for old button classes (level-toggle-btn, refresh-highlights-btn, etc.) - Keep only highlight-level-toggles container styling - Consistent button appearance across left and right sidebars - DRY: Single IconButton component handles all sidebar buttons
47 lines
1013 B
TypeScript
47 lines
1013 B
TypeScript
import React from 'react'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
|
|
|
interface IconButtonProps {
|
|
icon: IconDefinition
|
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
|
|
title?: string
|
|
ariaLabel?: string
|
|
variant?: 'primary' | 'success' | 'ghost'
|
|
size?: number
|
|
disabled?: boolean
|
|
spin?: boolean
|
|
className?: string
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
const IconButton: React.FC<IconButtonProps> = ({
|
|
icon,
|
|
onClick,
|
|
title,
|
|
ariaLabel,
|
|
variant = 'ghost',
|
|
size = 33,
|
|
disabled = false,
|
|
spin = false,
|
|
className = '',
|
|
style
|
|
}) => {
|
|
return (
|
|
<button
|
|
className={`icon-button ${variant} ${className}`.trim()}
|
|
onClick={onClick}
|
|
title={title}
|
|
aria-label={ariaLabel || title}
|
|
style={{ width: size, height: size, ...style }}
|
|
disabled={disabled}
|
|
>
|
|
<FontAwesomeIcon icon={icon} spin={spin} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default IconButton
|
|
|
|
|