mirror of
https://github.com/dergigi/boris.git
synced 2025-12-27 11:34:50 +01:00
- Create reusable CompactButton component for small, borderless buttons - Refactor relay indicator to use CompactButton - Refactor menu toggle button to use CompactButton - Make timestamp clickable with CompactButton (shows full date on hover) - Simplify CSS by removing duplicate button styles - Improve mobile touch targets for all compact buttons
42 lines
898 B
TypeScript
42 lines
898 B
TypeScript
import React from 'react'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
|
|
|
interface CompactButtonProps {
|
|
icon?: IconDefinition
|
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
|
|
title?: string
|
|
ariaLabel?: string
|
|
disabled?: boolean
|
|
spin?: boolean
|
|
className?: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
const CompactButton: React.FC<CompactButtonProps> = ({
|
|
icon,
|
|
onClick,
|
|
title,
|
|
ariaLabel,
|
|
disabled = false,
|
|
spin = false,
|
|
className = '',
|
|
children
|
|
}) => {
|
|
return (
|
|
<button
|
|
className={`compact-button ${className}`.trim()}
|
|
onClick={onClick}
|
|
title={title}
|
|
aria-label={ariaLabel || title}
|
|
disabled={disabled}
|
|
>
|
|
{icon && <FontAwesomeIcon icon={icon} spin={spin} />}
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default CompactButton
|
|
|