feat: added contacts block in userprofile component

src/components/UserProfile/Info/Contacts.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Button, HStack } from '@chakra-ui/react';
+import { FaPhone, FaTelegram, FaTwitter } from 'react-icons/fa';
+import type { IContactsProps } from '.';
+
+const Contacts: React.FC<IContactsProps> = observer(({ contacts }) => {
+  if (contacts === null) return null;
+
+  const { phone_number, twitter_id, telegram_id } = contacts;
+
+  const phoneHandler = () => window.open(`tel:${phone_number}`, '_blank');
+  const twitterHandler = () => window.open(`https://twitter.com/${twitter_id?.substring(1)}`, '_blank');
+  const telegramHandler = () => window.open(`https://t.me/${telegram_id?.substring(1)}`, '_blank');
+
+  return (
+    <HStack mt='5'>
+      {phone_number && (
+        <Button onClick={phoneHandler} colorScheme='whatsapp' size='xs' leftIcon={<FaPhone />}>
+          Call me
+        </Button>
+      )}
+      {twitter_id && (
+        <Button onClick={twitterHandler} colorScheme='twitter' size='xs' leftIcon={<FaTwitter />}>
+          Twitter
+        </Button>
+      )}
+      {telegram_id && (
+        <Button onClick={telegramHandler} colorScheme={'telegram'} size='xs' leftIcon={<FaTelegram />}>
+          Telegram
+        </Button>
+      )}
+    </HStack>
+  );
+});
+
+export { Contacts };

src/components/UserProfile/Info/index.ts

@@ -3,6 +3,7 @@ import { Info } from './Info';
 import { Heading } from './Heading';
 import { Details } from './Details';
 import { About } from './About';
+import { Contacts } from './Contacts';
 
 export interface IHeadingProps {
   fullname: string;
@@ -18,4 +19,8 @@ export interface IAboutProps {
   about: IUser['about'];
 }
 
-export { Info, Heading, Details, About };
+export interface IContactsProps {
+  contacts: IUser['contacts'];
+}
+
+export { Info, Heading, Details, About, Contacts };

src/components/UserProfile/index.tsx

@@ -2,7 +2,17 @@ import React from 'react';
 import { BoxProps, Flex, FlexProps } from '@chakra-ui/react';
 import { Base } from './Base';
 import { Avatar, ChatButton, IAvatarProps, IChatButtonProps } from './Avatar';
-import { About, Details, Heading, IAboutProps, IDetailsProps, IHeadingProps, Info } from './Info';
+import {
+  About,
+  Contacts,
+  Details,
+  Heading,
+  IAboutProps,
+  IContactsProps,
+  IDetailsProps,
+  IHeadingProps,
+  Info,
+} from './Info';
 import { Settings } from './Settings';
 import { ISettingsComposition } from './Settings/Settings';
 
@@ -14,6 +24,7 @@ interface IUserProfileComposition {
   Heading: React.FC<IHeadingProps>;
   Details: React.FC<IDetailsProps>;
   About: React.FC<IAboutProps>;
+  Contacts: React.FC<IContactsProps>;
   Settings: React.FC<BoxProps> & ISettingsComposition;
 }
 
@@ -32,6 +43,7 @@ UserProfile.Info = Info;
 UserProfile.Heading = Heading;
 UserProfile.Details = Details;
 UserProfile.About = About;
+UserProfile.Contacts = Contacts;
 UserProfile.Settings = Settings;
 
 export { UserProfile };

src/pages/profile/profile.tsx

@@ -40,6 +40,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
               <UserProfile.Heading fullname={me.fullname} roles={me.roles} />
               <UserProfile.Details registered={me.created_at} lastLogin={me.last_login} />
               <UserProfile.About about={me.about} />
+              <UserProfile.Contacts contacts={me.contacts} />
             </UserProfile.Info>
           </UserProfile.Base>
 

src/pages/user/user.tsx

@@ -42,6 +42,7 @@ const UserPage: React.FC<IPageProps> = () => {
               <UserProfile.Heading fullname={user.fullname} roles={user.roles} />
               <UserProfile.Details registered={user.created_at} lastLogin={user.last_login} />
               <UserProfile.About about={user.about} />
+              <UserProfile.Contacts contacts={user.contacts} />
             </UserProfile.Info>
           </UserProfile.Base>
         </UserProfile>