53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "@root/lib/utils";
|
|
|
|
// 1. Убираем импорт несуществующего типа ButtonProps
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { Info } from "lucide-react";
|
|
|
|
// 2. Определяем наши пропсы, расширяя стандартный тип для кнопок из React
|
|
export interface TooltipIconProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
tooltip: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export const TooltipIcon = React.forwardRef<
|
|
HTMLButtonElement,
|
|
TooltipIconProps
|
|
>(({ tooltip, icon, className, ...props }, ref) => {
|
|
const displayIcon = icon || <Info className="h-4 w-4" />;
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
ref={ref}
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-7 w-7 text-muted-foreground", className)}
|
|
{...props}
|
|
>
|
|
{displayIcon}
|
|
<span className="sr-only">
|
|
{typeof tooltip === "string" ? tooltip : "Icon button"}
|
|
</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
});
|
|
|
|
TooltipIcon.displayName = "TooltipIcon";
|