| ... | ... | @@ -1,4 +1,4 @@ |
| 1 | | import { useState } from "react"; |
| 1 | import { useId, useState } from "react"; |
| 2 | 2 | |
| 3 | 3 | import { cn } from "../../lib/utils"; |
| 4 | 4 | |
| ... | ... | @@ -17,12 +17,14 @@ export function ExpandableText({ |
| 17 | 17 | collapsedClassName?: string; |
| 18 | 18 | expandLabel?: string; |
| 19 | 19 | }) { |
| 20 | const textId = useId(); |
| 20 | 21 | const [expanded, setExpanded] = useState(false); |
| 21 | 22 | const canExpand = text.length > 180 || text.includes("\n"); |
| 22 | 23 | |
| 23 | 24 | return ( |
| 24 | 25 | <div className={cn("min-w-0", className)}> |
| 25 | 26 | <div |
| 27 | id={textId} |
| 26 | 28 | className={cn( |
| 27 | 29 | "whitespace-pre-wrap break-words", |
| 28 | 30 | !expanded && canExpand ? collapsedClassName : null, |
| ... | ... | @@ -33,6 +35,8 @@ export function ExpandableText({ |
| 33 | 35 | {canExpand ? ( |
| 34 | 36 | <button |
| 35 | 37 | type="button" |
| 38 | aria-expanded={expanded} |
| 39 | aria-controls={textId} |
| 36 | 40 | className="cursor-pointer mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline" |
| 37 | 41 | onClick={() => setExpanded((value) => !value)} |
| 38 | 42 | > |
Alex Southwell <saphid@gmail.com> 2026-09-06 17:11:41+10:00
GitHub <noreply@github.com> 2026-09-06 00:11:41-07:00