refactor: add types and clean FormattedText

src/components/FormattedText/FormattedText.jsx

@@ -1,27 +0,0 @@
-import { Text } from "tamagui";
-
-const FormattedText = ({ textElements, color, fontSize }) => {
-  return (
-    <Text color={color} fontSize={fontSize}>
-      {textElements.map((textElement, index) => {
-        if (textElement.bold) {
-          return (
-            <span key={index} style={{ fontWeight: "bold" }}>
-              {textElement.bold}
-            </span>
-          );
-        }
-        if (textElement.italic) {
-          return (
-            <span key={index} style={{ fontStyle: "italic" }}>
-              {textElement.italic}
-            </span>
-          );
-        }
-        return <span key={index}>{textElement.text}</span>;
-      })}
-    </Text>
-  );
-};
-
-export { FormattedText };

src/components/FormattedText/FormattedText.tsx

@@ -0,0 +1,36 @@
+import { Text } from 'tamagui'
+
+type TextElement = {
+  text: string
+  bold?: boolean
+  italic?: boolean
+}
+
+type FormattedTextProps = {
+  textElements: TextElement[]
+  color?: string
+  fontSize?: string
+}
+
+const FormattedText = ({ textElements, color, fontSize }: FormattedTextProps) => {
+  const calculateStyle = (textElement: TextElement) => {
+    const isBold = textElement.bold ?? false
+    const isItalic = textElement.italic ?? false
+
+    return { fontWeight: isBold ? 'bold' : '', fontStyle: isItalic ? 'italic' : '' }
+  }
+
+  return (
+    <Text color={color} fontSize={fontSize}>
+      {textElements.map((textElement, index) => {
+        return (
+          <span style={calculateStyle(textElement)} key={index}>
+            {textElement.text}
+          </span>
+        )
+      })}
+    </Text>
+  )
+}
+
+export { FormattedText }