Rewrote ProfileContainerMobile to tsx (#2220)

* Rewrote ProfileContainerMobile to tsx

* Refactor doneItems type

* Fix doneItems type

src/containers/user-profile/profile-info/ProfileContainerMobile.jsx → src/containers/user-profile/profile-info/ProfileContainerMobile.tsx

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import Box from '@mui/material/Box'
 import SchoolIcon from '@mui/icons-material/School'
 import DoneIcon from '@mui/icons-material/Done'
@@ -8,6 +10,17 @@ import AppChipList from '~/components/app-chips-list/AppChipList'
 import ProfileDoneItemsList from '~/components/icon-with-text-list/ProfileDoneItemsList'
 
 import { styles } from '~/containers/user-profile/profile-info/ProfileInfo.styles'
+import { UserResponse } from '~/types'
+
+interface ProfileContainerMobileProps {
+  actionIcon: ReactNode
+  accInfo: ReactNode
+  buttonGroup: ReactNode
+  defaultQuantity: number
+  doneItems: { title: string; description: string }[]
+  userData: UserResponse
+  chipItems: string[]
+}
 
 const ProfileContainerMobile = ({
   actionIcon,
@@ -17,18 +30,15 @@ const ProfileContainerMobile = ({
   doneItems,
   userData,
   chipItems
-}) => {
+}: ProfileContainerMobileProps) => {
+  const avatarSrc = userData.photo
+    ? `${import.meta.env.VITE_APP_IMG_USER_URL}${userData.photo}`
+    : ''
   return (
     <Box sx={styles.container}>
       <Box sx={styles.wrapperForPhoto}>
         <Box sx={styles.avatarContainerMobile}>
-          <Avatar
-            src={
-              userData.photo &&
-              `${import.meta.env.VITE_APP_IMG_USER_URL}${userData.photo}`
-            }
-            sx={styles.img}
-          />
+          <Avatar src={avatarSrc} sx={styles.img} />
         </Box>
 
         <TitleWithDescription