inogen/app/components/ui/truncatedText.tsx

32 lines
886 B
TypeScript

import * as React from "react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
interface TruncatedTextProps {
text: string
maxWords?: number
}
export function TruncatedText({ text, maxWords = 4 }: TruncatedTextProps) {
const words = text.trim().split(/\s+/)
console.log(words)
const shouldTruncate = words.length > maxWords
const displayText = shouldTruncate ? words.slice(0, maxWords).join(" ") + " ..." : text
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className={`${words.length >= 4 ? "cursor-help" : ""} text-foreground`}>
{displayText}
</span>
</TooltipTrigger>
{shouldTruncate && (
<TooltipContent className="max-w-xs">
{text}
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
)
}