Huang Xin
2c4df601d8
Move Radix/shadcn-based UI primitives into a dedicated `components/primitives` directory to better reflect their low-level, composable nature. Imports remain ergonomic via an alias to `components/ui`. App-level components should continue to use PascalCase filenames.
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { forwardRef, type ComponentPropsWithRef } from 'react';
|
|
import { Slottable } from '@radix-ui/react-slot';
|
|
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/utils/tailwind';
|
|
|
|
export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
|
|
tooltip: string;
|
|
side?: 'top' | 'bottom' | 'left' | 'right';
|
|
};
|
|
|
|
export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
|
|
({ children, tooltip, side = 'bottom', className, ...rest }, ref) => {
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant='ghost'
|
|
size='icon-sm'
|
|
{...rest}
|
|
className={cn('size-6 p-1', className)}
|
|
ref={ref}
|
|
>
|
|
<Slottable>{children}</Slottable>
|
|
<span className='sr-only'>{tooltip}</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side={side}>{tooltip}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
},
|
|
);
|
|
|
|
TooltipIconButton.displayName = 'TooltipIconButton';
|