refactor: TruncatedText

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>

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}

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>
   )

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.",

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