53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { clsx } from 'clsx/lite';
|
|
import Spinner, { SpinnerColor } from './Spinner';
|
|
|
|
export default function IconButton({
|
|
icon,
|
|
onClick,
|
|
isLoading,
|
|
className,
|
|
spinnerColor,
|
|
spinnerSize,
|
|
}: {
|
|
icon: JSX.Element
|
|
onClick?: () => void
|
|
isLoading?: boolean
|
|
className?: string
|
|
spinnerColor?: SpinnerColor
|
|
spinnerSize?: number
|
|
}) {
|
|
return (
|
|
<span className={clsx(
|
|
className,
|
|
'relative inline-flex items-center',
|
|
'w-[1rem] h-[1.1rem]',
|
|
)}>
|
|
{!isLoading
|
|
? <button
|
|
onClick={onClick}
|
|
className={clsx(
|
|
'inline-flex items-center justify-center',
|
|
'p-0 border-none shadow-none',
|
|
'active:bg-transparent bg-transparent dark:bg-transparent',
|
|
'translate-x-[-1px]',
|
|
onClick !== undefined && 'cursor-pointer',
|
|
'active:opacity-50',
|
|
)}
|
|
>
|
|
{icon}
|
|
</button>
|
|
: <span className={clsx(
|
|
'inline-flex items-center justify-center',
|
|
'h-full w-full',
|
|
)}>
|
|
<Spinner
|
|
color={spinnerColor}
|
|
size={spinnerSize}
|
|
/>
|
|
</span>}
|
|
</span>
|
|
);
|
|
}
|