Function ActionButton

src/components/action-button.tsx:20–58

({
  onClick,
  icon: Icon,
  tooltipText,
  disabled,
  text,
  loading = false,
}: ActionButtonProps)

}

export function ActionButton({
  onClick,
  icon: Icon,
  tooltipText,
  disabled,
  text,
  loading = false,
}: ActionButtonProps) {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            onClick={(e) => {
              e.preventDefault();
              if (!loading) {
                onClick();
              }
            }}
            disabled={(disabled ?? false) || (loading ?? false)}
            className="border-[3px] border-black bg-green-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-green-400 sm:p-6 sm:px-6 sm:text-lg relative"
          >
            {loading ? (
              <Loader2 className="h-6 w-6 animate-spin" />
            ) : (
              <>
                <Icon className="h-6 w-6" />
                {text && <span className="text-sm">{text}</span>}
              </>
            )}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>{tooltipText}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}