87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
// * Packages
|
|
import { Link } from "@inertiajs/react";
|
|
import {
|
|
ButtonHTMLAttributes,
|
|
CSSProperties,
|
|
MouseEventHandler,
|
|
ReactNode,
|
|
} from "react";
|
|
import { VariantProps } from "class-variance-authority";
|
|
// * Components shadcn
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
|
|
type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
|
type ButtonSize = VariantProps<typeof buttonVariants>["size"];
|
|
type ButtonType = ButtonHTMLAttributes<HTMLButtonElement>["type"];
|
|
|
|
type BtnOptionnalLinkWithTooltipProps = {
|
|
link?: string | null;
|
|
content: ReactNode;
|
|
tooltipContent: ReactNode;
|
|
className?: string;
|
|
type?: ButtonType;
|
|
size?: ButtonSize;
|
|
variant?: ButtonVariant;
|
|
externalLink?: boolean;
|
|
disabled?: boolean;
|
|
style?: CSSProperties;
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
};
|
|
|
|
export default function BtnOptionnalLinkWithTooltip({
|
|
link = null,
|
|
content,
|
|
tooltipContent,
|
|
className = "",
|
|
type = "button",
|
|
size = "icon",
|
|
variant = "default",
|
|
externalLink = false,
|
|
disabled = false,
|
|
style,
|
|
onClick,
|
|
...props
|
|
}: BtnOptionnalLinkWithTooltipProps) {
|
|
let innerContent: ReactNode = content;
|
|
|
|
if (link !== null) {
|
|
if (externalLink) {
|
|
innerContent = disabled ? (
|
|
<Button disabled>{content}</Button>
|
|
) : (
|
|
<a href={link} target="_blank" rel="noreferrer">
|
|
{content}
|
|
</a>
|
|
);
|
|
} else {
|
|
innerContent = <Link href={link}>{content}</Link>;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant={variant}
|
|
size={size}
|
|
className={className}
|
|
type={type}
|
|
asChild={link !== null}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
style={style}
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
{...props}
|
|
>
|
|
{innerContent}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{tooltipContent}</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|