70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import {
|
|
IconDefinition,
|
|
faCircleExclamation,
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
|
|
import { CustomIcon, CustomIconName } from './CustomIcon'
|
|
|
|
const iconSizes = {
|
|
xs: 12,
|
|
sm: 14,
|
|
md: 20,
|
|
lg: 24,
|
|
}
|
|
|
|
export interface ActionIconProps extends React.PropsWithChildren {
|
|
icon?: IconDefinition | CustomIconName
|
|
iconColor?: string
|
|
className?: string
|
|
bgClassName?: string
|
|
iconClassName?: string
|
|
size?: keyof typeof iconSizes
|
|
'data-testid'?: string
|
|
}
|
|
|
|
export const ActionIcon = (props: ActionIconProps) => {
|
|
const {
|
|
icon = faCircleExclamation,
|
|
iconColor,
|
|
className,
|
|
bgClassName,
|
|
iconClassName,
|
|
size = 'md',
|
|
children,
|
|
} = props
|
|
|
|
const computedIconClassName = `h-auto text-inherit dark:text-current group-disabled:text-chalkboard-60 group-disabled:text-chalkboard-60 ${iconClassName}`
|
|
const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 group-disabled:bg-chalkboard-30 dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
|
|
|
|
return (
|
|
<span style={{ color: iconColor }}>
|
|
<div
|
|
data-testid={props['data-testid']}
|
|
className={
|
|
`w-fit self-stretch inline-grid place-content-center ${className} ` +
|
|
computedBgClassName
|
|
}
|
|
>
|
|
{children ? (
|
|
children
|
|
) : typeof icon === 'string' ? (
|
|
<CustomIcon
|
|
name={icon}
|
|
width={iconSizes[size]}
|
|
height={iconSizes[size]}
|
|
className={computedIconClassName}
|
|
/>
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={icon}
|
|
width={iconSizes[size]}
|
|
height={iconSizes[size]}
|
|
className={computedIconClassName}
|
|
/>
|
|
)}
|
|
</div>
|
|
</span>
|
|
)
|
|
}
|