39 lines
802 B
TypeScript
39 lines
802 B
TypeScript
|
import { cn } from '@/lib/utils'
|
||
|
|
import {
|
||
|
|
Tooltip,
|
||
|
|
TooltipContent,
|
||
|
|
TooltipProvider,
|
||
|
|
TooltipTrigger,
|
||
|
|
} from '@/components/ui/tooltip'
|
||
|
|
|
||
|
|
interface TruncatedTextProps {
|
||
|
|
text: string
|
||
|
|
className?: string
|
||
|
|
maxWidth?: string
|
||
|
|
side?: 'top' | 'bottom' | 'left' | 'right'
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TruncatedText({
|
||
|
|
text,
|
||
|
|
className,
|
||
|
|
maxWidth = 'max-w-[200px]',
|
||
|
|
side = 'top',
|
||
|
|
}: TruncatedTextProps) {
|
||
|
|
return (
|
||
|
|
<TooltipProvider delay={300}>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger
|
||
|
|
render={
|
||
|
|
<span className={cn('block truncate', maxWidth, className)} />
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{text}
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent side={side} className='max-w-xs break-all'>
|
||
|
|
{text}
|
||
|
|
</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</TooltipProvider>
|
||
|
|
)
|
||
|
|
}
|