36 lines
887 B
TypeScript
36 lines
887 B
TypeScript
import type React from 'react';
|
|
|
|
type DefaulButtonProps = JSX.IntrinsicElements['button'];
|
|
|
|
export interface IconButtonProps extends DefaulButtonProps {
|
|
icon: React.ReactNode;
|
|
active?: boolean;
|
|
}
|
|
|
|
export const IconButton = ({
|
|
icon,
|
|
active,
|
|
disabled,
|
|
...props
|
|
}: IconButtonProps): JSX.Element => {
|
|
return (
|
|
<div className="my-auto text-gray-500 dark:text-gray-400">
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
className={`p-2 transition duration-200 ease-in-out rounded-md active:scale-95 ${
|
|
active
|
|
? 'bg-gray-200 dark:bg-gray-600'
|
|
: 'hover:bg-gray-200 dark:hover:bg-gray-600'
|
|
} ${
|
|
disabled ? 'text-gray-400 dark:text-gray-700 cursor-not-allowed' : ''
|
|
}`}
|
|
{...props}
|
|
>
|
|
{icon}
|
|
<span className="sr-only">Refresh</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|