2023-10-19 03:18:36 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
import { PropsWithChildren, useRef } from 'react';
|
|
|
|
import { Tooltip } from '@sd/ui';
|
|
|
|
import { useIsTextTruncated } from '~/hooks';
|
|
|
|
|
|
|
|
export const TruncatedText = ({
|
|
|
|
children,
|
|
|
|
className
|
|
|
|
}: PropsWithChildren<{ className?: string }>) => {
|
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
const isTruncated = useIsTextTruncated(ref);
|
|
|
|
|
|
|
|
return (
|
2023-10-25 18:29:21 +00:00
|
|
|
<Tooltip tooltipClassName="max-w-fit" label={isTruncated ? children : undefined} asChild>
|
2023-10-19 03:18:36 +00:00
|
|
|
<div ref={ref} className={clsx('truncate', className)}>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
};
|