feat: actor page

components/OverviewText.tsx

@@ -5,26 +5,32 @@ import { useState } from "react";
 
 interface Props extends ViewProps {
   text?: string | null;
+  characterLimit?: number;
 }
 
-const LIMIT = 140;
-
-export const OverviewText: React.FC<Props> = ({ text, ...props }) => {
-  const [limit, setLimit] = useState(LIMIT);
+export const OverviewText: React.FC<Props> = ({
+  text,
+  characterLimit = 140,
+  ...props
+}) => {
+  const [limit, setLimit] = useState(characterLimit);
 
   if (!text) return null;
 
-  if (text.length > LIMIT)
+  if (text.length > characterLimit)
     return (
       <TouchableOpacity
         onPress={() =>
-          setLimit((prev) => (prev === LIMIT ? text.length : LIMIT))
+          setLimit((prev) =>
+            prev === characterLimit ? text.length : characterLimit
+          )
         }
+        {...props}
       >
         <View {...props} className="">
           <Text>{tc(text, limit)}</Text>
           <Text className="text-purple-600 mt-1">
-            {limit === LIMIT ? "Show more" : "Show less"}
+            {limit === characterLimit ? "Show more" : "Show less"}
           </Text>
         </View>
       </TouchableOpacity>