2024-08-11 14:24:37 +03:00
|
|
|
import clsx from 'clsx';
|
|
|
|
|
|
|
|
import { globals } from '@/utils/constants';
|
2024-08-19 19:15:21 +03:00
|
|
|
import { truncateToLastWord } from '@/utils/utils';
|
2024-08-11 14:24:37 +03:00
|
|
|
|
|
|
|
import { CProps } from '../props';
|
|
|
|
|
|
|
|
export interface TextContentProps extends CProps.Styling {
|
|
|
|
text: string;
|
|
|
|
maxLength?: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
function TextContent({ className, text, maxLength, ...restProps }: TextContentProps) {
|
2024-08-19 19:15:21 +03:00
|
|
|
const truncated = maxLength ? truncateToLastWord(text, maxLength) : text;
|
2024-08-11 14:24:37 +03:00
|
|
|
const isTruncated = maxLength && text.length > maxLength;
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={clsx('text-xs text-pretty', className)}
|
|
|
|
data-tooltip-id={isTruncated ? globals.tooltip : undefined}
|
|
|
|
data-tooltip-content={isTruncated ? text : undefined}
|
|
|
|
{...restProps}
|
|
|
|
>
|
|
|
|
{truncated}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TextContent;
|