2023-12-07 16:33:37 +00:00
|
|
|
import { MouseEventHandler } from "react";
|
|
|
|
|
|
|
|
|
|
export const IconButton: React.FC<{
|
|
|
|
|
onClick: () => void;
|
|
|
|
|
disabled?: boolean;
|
2023-12-08 09:41:54 +00:00
|
|
|
className?: string;
|
2023-12-07 16:33:37 +00:00
|
|
|
color?: string;
|
2023-12-07 22:42:19 +00:00
|
|
|
children: any;
|
2023-12-08 09:41:54 +00:00
|
|
|
}> = (props) => {
|
|
|
|
|
const { onClick, disabled, color, children, className, ...otherProps } =
|
|
|
|
|
props;
|
2023-12-07 16:33:37 +00:00
|
|
|
const onClickStopPropagation: MouseEventHandler<HTMLAnchorElement> = (e) => {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
if (disabled) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
onClick();
|
|
|
|
|
};
|
2023-12-07 22:42:19 +00:00
|
|
|
const colorClassName = color ? `text-${color}` : "";
|
2023-12-07 16:33:37 +00:00
|
|
|
return (
|
|
|
|
|
<a
|
2024-04-06 09:20:03 +01:00
|
|
|
className={`p-1 text-blue-500 flex items-center justify-center ${colorClassName} ${className}`}
|
2023-12-07 16:33:37 +00:00
|
|
|
onClick={onClickStopPropagation}
|
|
|
|
|
href="#"
|
2023-12-08 09:41:54 +00:00
|
|
|
{...otherProps}
|
2023-12-07 22:42:19 +00:00
|
|
|
>
|
|
|
|
|
{children}
|
|
|
|
|
</a>
|
2023-12-07 16:33:37 +00:00
|
|
|
);
|
|
|
|
|
};
|