Spaces:
Build error
Build error
File size: 2,781 Bytes
b59aa07 |
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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
import { Tooltip } from "@heroui/react";
import React, { ReactNode } from "react";
import { NavLink } from "react-router";
import { cn } from "#/utils/utils";
export interface TooltipButtonProps {
children: ReactNode;
tooltip: string;
onClick?: () => void;
href?: string;
navLinkTo?: string;
ariaLabel: string;
testId?: string;
className?: React.HTMLAttributes<HTMLButtonElement>["className"];
disabled?: boolean;
}
export function TooltipButton({
children,
tooltip,
onClick,
href,
navLinkTo,
ariaLabel,
testId,
className,
disabled = false,
}: TooltipButtonProps) {
const handleClick = (e: React.MouseEvent) => {
if (onClick && !disabled) {
onClick();
e.preventDefault();
}
};
const buttonContent = (
<button
type="button"
aria-label={ariaLabel}
data-testid={testId}
onClick={handleClick}
className={cn(
"hover:opacity-80",
disabled && "opacity-50 cursor-not-allowed",
className,
)}
disabled={disabled}
>
{children}
</button>
);
let content;
if (navLinkTo && !disabled) {
content = (
<NavLink
to={navLinkTo}
onClick={handleClick}
className={({ isActive }) =>
cn(
"hover:opacity-80",
isActive ? "text-white" : "text-[#9099AC]",
className,
)
}
aria-label={ariaLabel}
data-testid={testId}
>
{children}
</NavLink>
);
} else if (navLinkTo && disabled) {
// If disabled and has navLinkTo, render a button that looks like a NavLink but doesn't navigate
content = (
<button
type="button"
aria-label={ariaLabel}
data-testid={testId}
className={cn(
"text-[#9099AC]",
"opacity-50 cursor-not-allowed",
className,
)}
disabled
>
{children}
</button>
);
} else if (href && !disabled) {
content = (
<a
href={href}
target="_blank"
rel="noreferrer noopener"
className={cn("hover:opacity-80", className)}
aria-label={ariaLabel}
data-testid={testId}
>
{children}
</a>
);
} else if (href && disabled) {
// If disabled and has href, render a button that looks like a link but doesn't navigate
content = (
<button
type="button"
aria-label={ariaLabel}
data-testid={testId}
className={cn("opacity-50 cursor-not-allowed", className)}
disabled
>
{children}
</button>
);
} else {
content = buttonContent;
}
return (
<Tooltip content={tooltip} closeDelay={100} placement="right">
{content}
</Tooltip>
);
}
|