feat(i18n): added i18next for user interface translations (#432)

src/components/Author/Author.tsx

@@ -1,14 +1,17 @@
 import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
+import { getAuthorName } from '../../utils/package';
 
 import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
 
 const Author: FC = () => {
   const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();
 
   if (!packageMeta) {
     return null;
@@ -25,7 +28,7 @@ const Author: FC = () => {
   const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
 
   return (
-    <List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
+    <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
       <AuthorListItem button={true}>
         {!email || !isEmail(email) ? (
           avatarComponent
@@ -34,8 +37,7 @@ const Author: FC = () => {
             {avatarComponent}
           </a>
         )}
-
-        <AuthorListItemText primary={name} />
+        {name && <AuthorListItemText primary={getAuthorName(name)} />}
       </AuthorListItem>
     </List>
   );