messages form

src/containers/profile/ProfileInfo/index.tsx

@@ -5,19 +5,32 @@ import { Group } from '~/components/containers/Group';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { getURL, getPrettyDate } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
+import { ProfileTabs } from '../ProfileTabs';
+import { MessageForm } from '~/components/profile/MessageForm';
 
 interface IProps {
   user?: IUser;
+  tab: string;
+
   is_loading?: boolean;
+  is_own?: boolean;
+
+  setTab?: (tab: string) => void;
 }
 
-const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
-  <Group>
+const TAB_HEADERS = {
+  messages: <MessageForm is_sending_message={false} />,
+};
+
+const ProfileInfo: FC<IProps> = ({ user, tab, is_loading, is_own, setTab }) => (
+  <div>
     <Group className={styles.wrap} horizontal>
       <div
         className={styles.avatar}
         style={{
-          backgroundImage: `url("${user && getURL(user.photo, PRESETS.avatar)}")`,
+          backgroundImage: is_loading
+            ? null
+            : `url("${user && getURL(user.photo, PRESETS.avatar)}")`,
         }}
       />
 
@@ -31,7 +44,11 @@ const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
         </div>
       </div>
     </Group>
-  </Group>
+
+    <ProfileTabs tab={tab} is_own={is_own} setTab={setTab} />
+
+    {TAB_HEADERS[tab] || null}
+  </div>
 );
 
 export { ProfileInfo };

src/containers/profile/ProfileInfo/styles.scss

@@ -16,13 +16,13 @@
   background: $content_bg 50% 50% no-repeat/cover;
   position: absolute;
   bottom: 0;
-  left: 0;
+  left: $gap;
 }
 
 .field {
-  padding-left: 110px;
+  padding: $gap 0 0 120px;
   flex: 1;
-  padding-bottom: 5px;
+  // padding-bottom: 5px;
 }
 
 .name {