SeeMoreTextWithoutModal index.tsx

0% Statements 0/10

0% Branches 0/17

0% Functions 0/2

0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useState } from "react";
 
interface SeeMoreTextWithoutModalProps {
  text: string;
  maxLength?: number;
  className?: string;
  showMoreText?: boolean;
}
 
const SeeMoreTextWithoutModal: React.FC<SeeMoreTextWithoutModalProps> = ({
  text,
  maxLength = 100,
  className,
  showMoreText = true,
}) => {
  const [expanded, setExpanded] = useState(false);
 
  const handleToggle = () => {
    setExpanded(!expanded);
  };
 
  const shouldTruncateByLength = text.length > maxLength;
 
  const truncatedText = shouldTruncateByLength
    ? text.slice(0, maxLength) + "..."
    : text;
 
  const displayedText = expanded
    ? text
    : shouldTruncateByLength
    ? truncatedText
    : text;
 
  return (
    <div
      className={`${className} text-gray-800 ${
        text.length > 100 ? "min-w-[200px]" : "min-w-[50px]"
      } w-full`}>
      <p
        className={`${
          text.length < 100
            ? "whitespace-nowrap"
            : "whitespace-pre-line break-all"
        }`}>
        {displayedText}
      </p>
      {shouldTruncateByLength && showMoreText && (
        <button
          onClick={handleToggle}
          className="text-violet-500 hover:underline mt-2">
          {expanded ? "See Less" : "See More"}
        </button>
      )}
    </div>
  );
};
 
export default SeeMoreTextWithoutModal;