From 84b0cf489968902957f88dbc334547b0c9a12210 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 19 Jan 2026 19:56:53 -0800
Subject: [PATCH] refactor: TruncatedText

- refactor: Deprecate text prop; accept children
- fix(i18n): use common namespace strings
- refactor: LINE_CLAMP_CLASS_MAPPING to constants
- update: existing component usage
---
 app/[locale]/apps/_components/AppCard.tsx     |  5 ++-
 .../apps/_components/AppsHighlight.tsx        |  5 ++-
 src/components/ui/TruncatedText.tsx           | 40 +++++++++----------
 src/intl/en/common.json                       |  1 +
 src/lib/constants.ts                          |  7 ++++
 5 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/app/[locale]/apps/_components/AppCard.tsx b/app/[locale]/apps/_components/AppCard.tsx
index b9014244d69..bc499bd1a63 100644
--- a/app/[locale]/apps/_components/AppCard.tsx
+++ b/app/[locale]/apps/_components/AppCard.tsx
@@ -70,14 +70,15 @@ const AppCard = ({
         </p>
         {showDescription && (
           <TruncatedText
-            text={app.description}
             className="text-body group-hover:text-body"
             matomoEvent={{
               eventCategory: matomoCategory,
               eventAction: `${matomoAction}_show_more`,
               eventName: `app description ${app.name}`,
             }}
-          />
+          >
+            {app.description}
+          </TruncatedText>
         )}
         <TagsInlineText list={app.subCategory} variant="light" />
       </div>
diff --git a/app/[locale]/apps/_components/AppsHighlight.tsx b/app/[locale]/apps/_components/AppsHighlight.tsx
index 75454ff7de5..df2181a400b 100644
--- a/app/[locale]/apps/_components/AppsHighlight.tsx
+++ b/app/[locale]/apps/_components/AppsHighlight.tsx
@@ -39,13 +39,14 @@ const AppsHighlight = ({ apps, matomoCategory }: AppsHighlightProps) => {
         </div>
         <div className="mb-4">
           <TruncatedText
-            text={app.description}
             matomoEvent={{
               eventCategory: matomoCategory,
               eventAction: "highlights_show_more",
               eventName: `app description ${app.name}`,
             }}
-          />
+          >
+            {app.description}
+          </TruncatedText>
         </div>
         <AppCard
           app={app}
diff --git a/src/components/ui/TruncatedText.tsx b/src/components/ui/TruncatedText.tsx
index 3f233c3457f..253cc84dd63 100644
--- a/src/components/ui/TruncatedText.tsx
+++ b/src/components/ui/TruncatedText.tsx
@@ -6,40 +6,38 @@ import type { MatomoEventOptions } from "@/lib/types"
 
 import { Button } from "@/components/ui/buttons/Button"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-interface TruncatedTextProps {
-  text: string
+import { LINE_CLAMP_CLASS_MAPPING } from "@/lib/constants"
+
+import useTranslation from "@/hooks/useTranslation"
+
+interface TruncatedTextProps
+  extends Pick<
+    React.HTMLAttributes<HTMLParagraphElement>,
+    "children" | "className"
+  > {
   maxLines?: number
-  showMoreText?: string
-  showLessText?: string
-  className?: string
   matomoEvent?: MatomoEventOptions
 }
 
 const TruncatedText = ({
-  text,
   maxLines = 2,
-  showMoreText = "Show more",
-  showLessText = "Show less",
-  className = "",
+  className,
+  children,
   matomoEvent,
 }: TruncatedTextProps) => {
+  const { t } = useTranslation("common")
   const [isExpanded, setIsExpanded] = useState(false)
 
-  const lineClampClass = {
-    1: "line-clamp-1",
-    2: "line-clamp-2",
-    3: "line-clamp-3",
-    4: "line-clamp-4",
-  }
-
   return (
     <div className={className}>
       <p
-        className={`text-body ${
-          !isExpanded ? `${lineClampClass[maxLines]} overflow-hidden` : ""
-        }`}
+        className={cn(
+          "text-body",
+          !isExpanded && `${LINE_CLAMP_CLASS_MAPPING[maxLines]} overflow-hidden`
+        )}
         style={
           !isExpanded
             ? {
@@ -54,7 +52,7 @@ const TruncatedText = ({
           matomoEvent && !isExpanded && trackCustomEvent(matomoEvent)
         }
       >
-        {text}
+        {children}
       </p>
       <Button
         variant="link"
@@ -66,7 +64,7 @@ const TruncatedText = ({
         }}
         className="relative z-10 mt-1 h-auto p-0 text-sm no-underline"
       >
-        {isExpanded ? showLessText : showMoreText}
+        {t(`show-${isExpanded ? "less" : "more"}`)}
       </Button>
     </div>
   )
diff --git a/src/intl/en/common.json b/src/intl/en/common.json
index 193cac62783..d01c7751e00 100644
--- a/src/intl/en/common.json
+++ b/src/intl/en/common.json
@@ -435,6 +435,7 @@
   "set-up-local-env": "Set up local environment",
   "sharding": "Sharding",
   "show-all": "Show all",
+  "show-more": "Show more",
   "show-less": "Show less",
   "single-slot-finality": "Single-slot finality",
   "site-description": "Ethereum is a global, decentralized platform for money and new kinds of applications. On Ethereum, you can write code that controls money, and build applications accessible anywhere in the world.",
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index fd69ee33964..53fec483759 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -249,3 +249,10 @@ export const SIZE_CLASS_MAPPING = {
   16: "size-16",
   24: "size-24",
 } as const
+
+export const LINE_CLAMP_CLASS_MAPPING = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+} as const