Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 1x 1x 1x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 199x 2x 2x 2x 197x 197x 197x 146x 197x 199x 199x | import { ReactNode } from 'react';
// Utils
import { combineClasses } from '@shared/utils';
// Icons
import LoaderCircleIcon from '@shared/icons/LoaderCircleIcon';
interface ButtonProps {
isActive?: boolean;
icon?: ReactNode;
selectedIcon?: ReactNode;
children?: ReactNode;
label?: string;
onClick?: () => void;
disabled?: boolean;
isLoading?: boolean;
className?: string;
id?: string;
}
export const Button = ({
isActive,
icon,
selectedIcon,
onClick,
children,
disabled = false,
isLoading = false,
className,
id,
}: ButtonProps) => {
const Icon = isActive ? selectedIcon : icon;
return (
<button
data-testid={id}
disabled={disabled}
aria-pressed={isActive}
className={combineClasses(
'flex items-center justify-center gap-1 font-poppins text-xs leading-sm',
className,
)}
onClick={onClick}
>
{isLoading ? (
<div className="flex-center">
<LoaderCircleIcon className="size-4 w-full animate-spin" />
</div>
) : (
<>
{children}
{icon && (
<span className="flex items-center justify-center">{Icon}</span>
)}
</>
)}
</button>
);
};
|