From ed6b0faff45dd324b3bb84e106a49148a4b01d96 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 7 Jan 2026 23:29:37 +0100
Subject: [PATCH] Add ExpandableText component

---
 client/src/components/ExpandableText.tsx | 25 ++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 client/src/components/ExpandableText.tsx

diff --git a/client/src/components/ExpandableText.tsx b/client/src/components/ExpandableText.tsx
new file mode 100644
index 0000000..381b06f
--- /dev/null
+++ b/client/src/components/ExpandableText.tsx
@@ -0,0 +1,25 @@
+import { useMemo, useState } from 'react';
+
+interface Props {
+  text: string;
+  maxLines?: number;
+}
+
+export default function ExpandableText({ text, maxLines = 1 }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const lines = useMemo(() => text.split('\n'), [text]);
+  const shouldClamp = lines.length > maxLines || text.length > 140;
+
+  if (!shouldClamp) {
+    return <p className="ig-desc">{text}</p>;
+  }
+
+  return (
+    <div className="ig-desc expandable">
+      <div className={expanded ? 'full' : 'clamped'}>{text}</div>
+      <button className="link-button" onClick={() => setExpanded((v) => !v)}>
+        {expanded ? 'Show less' : 'Show more'}
+      </button>
+    </div>
+  );
+}