Read More

import { ReadMore } from "@/components/ui/read-more";

export default function Example() {
  return <ReadMore />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const ReadMore = forwardRef(({ className, text = "", maxLength = 150, moreLabel = "Read more", lessLabel = "Read less", ...props }, ref) => {
  const [expanded, setExpanded] = useState(false);
  const shouldTruncate = text.length > maxLength;

  return (
    <div ref={ref} className={cn("text-sm", className)} {...props}>
      <span>{expanded || !shouldTruncate ? text : `${text.slice(0, maxLength)}…`}</span>
      {shouldTruncate && (
        <button onClick={() => setExpanded(!expanded)} className="ml-1 font-medium text-primary hover:underline">
          {expanded ? lessLabel : moreLabel}
        </button>
      )}
    </div>
  );
});
ReadMore.displayName = "ReadMore";

export { ReadMore };