new-api/web/default/src/components/truncated-text.tsx
CaIon 3caa6e467b
fix(web/default): batch fix new UI issues #4880 #4893 #4817 #4877 #4898
- Add singleSelect to status/role filters in API keys, users, and redemptions tables (#4880)
- Fix affiliate link 404 by changing /register to /sign-up (#4893)
- Open FetchModelsDialog in channel creation mode via customFetcher prop (#4817)
- Add TruncatedText component with tooltip for long channel names, token names, and usernames (#4877)
- Elevate forgot-password link z-index to prevent label click interception (#4898)
2026-05-16 14:48:49 +08:00

39 lines
802 B
TypeScript
Vendored

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>
)
}