ButtonTooltip.tsx28 lines · main

1	import { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, ReactNode } from 'react'
2	import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
3
4	export const ButtonTooltip = forwardRef<
5	ElementRef<typeof Button>,
6	ComponentPropsWithoutRef<typeof Button> & {
7	tooltip: {
8	content: ComponentProps<typeof TooltipContent> & {
9	text?: string | ReactNode
10	}
11	}
12	}
13	>(({ tooltip, className, ...props }, ref) => {
14	return (
15	<Tooltip>
16	<TooltipTrigger asChild>
17	<Button ref={ref} {...props} className={cn(className, 'pointer-events-auto')}>
18	{props.children}
19	</Button>
20	</TooltipTrigger>
21	{tooltip.content.text !== undefined && (
22	<TooltipContent {...tooltip.content}>{tooltip.content.text}</TooltipContent>
23	)}
24	</Tooltip>
25	)
26	})
27
28	ButtonTooltip.displayName = 'ButtonTooltip'