2023-06-15 12:52:46 +03:00
|
|
|
/* eslint-disable */
|
2023-06-05 08:53:47 +03:00
|
|
|
"use client";
|
2023-06-15 12:52:46 +03:00
|
|
|
import { HTMLAttributes } from "react";
|
|
|
|
|
2023-06-05 08:53:47 +03:00
|
|
|
import { cn } from "@/lib/utils";
|
2023-06-15 12:52:46 +03:00
|
|
|
|
2023-06-05 08:53:47 +03:00
|
|
|
import Tooltip from "./Tooltip";
|
|
|
|
|
|
|
|
interface EllipsisProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
|
children: string;
|
|
|
|
maxCharacters: number;
|
|
|
|
tooltip?: boolean;
|
|
|
|
}
|
|
|
|
|
2023-06-15 12:52:46 +03:00
|
|
|
const Ellipsis = ({
|
2023-06-05 08:53:47 +03:00
|
|
|
children: originalContent,
|
|
|
|
className,
|
|
|
|
maxCharacters,
|
|
|
|
tooltip = false,
|
2023-06-15 12:52:46 +03:00
|
|
|
}: EllipsisProps): JSX.Element => {
|
2023-06-05 08:53:47 +03:00
|
|
|
const renderedContent =
|
|
|
|
originalContent.length > maxCharacters
|
|
|
|
? `${originalContent.slice(0, maxCharacters)}...`
|
|
|
|
: originalContent;
|
|
|
|
console.log(originalContent, maxCharacters, tooltip, renderedContent);
|
|
|
|
|
|
|
|
if (tooltip && originalContent !== renderedContent) {
|
|
|
|
return (
|
|
|
|
<Tooltip tooltip={originalContent}>
|
|
|
|
<span aria-label={originalContent} className={cn("", className)}>
|
|
|
|
{renderedContent}
|
|
|
|
</span>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span aria-label={originalContent} className={cn("", className)}>
|
|
|
|
{renderedContent}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Ellipsis;
|