31 lines
851 B
TypeScript
31 lines
851 B
TypeScript
import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
|
|
import cx from 'clsx';
|
|
import { MouseEvent, MouseEventHandler, RefObject, useCallback } from 'react';
|
|
import styles from './ActionIcon.module.css';
|
|
|
|
type ActionIconProps = {
|
|
icon: IconProps['icon'];
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
extendClassName?: HTMLButtonElement['className'];
|
|
ref?: RefObject<HTMLButtonElement>;
|
|
};
|
|
|
|
export function ActionIcon({ icon, onClick, extendClassName, ref }: ActionIconProps) {
|
|
const handleClick = useCallback(
|
|
(event: MouseEvent<HTMLButtonElement>) => {
|
|
onClick?.(event);
|
|
},
|
|
[onClick],
|
|
);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
className={cx(styles.action_icon, extendClassName)}
|
|
ref={ref}>
|
|
<Icon icon={icon} className={styles.icon} />
|
|
</button>
|
|
);
|
|
}
|