import { useState } from "react"; import { cn } from "../../lib/utils"; /** * Long error text clamped to a few lines with a toggle to reveal the rest. * Short single-line text renders as-is without the toggle. */export function ExpandableText({ text, className, collapsedClassName = "line-clamp-3", expandLabel = "Show full error",}: { text: string; className?: string; collapsedClassName?: string; expandLabel?: string;}) { const [expanded, setExpanded] = useState(false); const canExpand = text.length > 180 || text.includes("\n"); return ( <div className={cn("min-w-0", className)}> <div className={cn( "whitespace-pre-wrap break-words", !expanded && canExpand ? collapsedClassName : null, )} > {text} </div> {canExpand ? ( <button type="button" className="cursor-pointer mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline" onClick={() => setExpanded((value) => !value)} > {expanded ? "Show less" : expandLabel} </button> ) : null} </div> );}
import { useState } from "react";
import { cn } from "../../lib/utils";
/**
* Long error text clamped to a few lines with a toggle to reveal the rest.
* Short single-line text renders as-is without the toggle.
*/
export function ExpandableText({
text,
className,
collapsedClassName = "line-clamp-3",
expandLabel = "Show full error",
}: {
text: string;
className?: string;
collapsedClassName?: string;
expandLabel?: string;
}) {
const [expanded, setExpanded] = useState(false);
const canExpand = text.length > 180 || text.includes("\n");
return (
<div className={cn("min-w-0", className)}>
<div
className={cn(
"whitespace-pre-wrap break-words",
!expanded && canExpand ? collapsedClassName : null,
)}
>
{text}
</div>
{canExpand ? (
<button
type="button"
className="cursor-pointer mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
onClick={() => setExpanded((value) => !value)}
>
{expanded ? "Show less" : expandLabel}
</button>
) : null}
</div>
);
}