made sample profile page

src/containers/profile/ProfilePageLeft/index.tsx

@@ -9,6 +9,9 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 import markdown from '~/styles/common/markdown.module.scss';
+import { ProfileAvatar } from '~/containers/profile/ProfileAvatar';
+import { Avatar } from '~/components/common/Avatar';
+import { Markdown } from '~/components/containers/Markdown';
 
 interface IProps {
   profile: IAuthState['profile'];
@@ -16,49 +19,30 @@ interface IProps {
 }
 
 const ProfilePageLeft: FC<IProps> = ({ username, profile }) => {
-  const thumb = useMemo(() => {
-    if (!profile || !profile.user || !profile.user.photo) return '';
-
-    return getURL(profile.user.photo, PRESETS.small_hero);
-  }, [profile]);
-
   return (
     <div className={styles.wrap}>
-      <div className={styles.avatar} style={{ backgroundImage: `url('${thumb}')` }} />
+      <Avatar
+        username={username}
+        url={profile.user?.photo?.url}
+        className={styles.avatar}
+        preset={PRESETS['600']}
+      />
 
-      <div className={styles.region_wrap}>
-        <div className={styles.region}>
-          <div className={styles.name}>
-            {profile.is_loading ? <Placeholder /> : profile?.user?.fullname}
-          </div>
+      <div className={styles.region}>
+        <div className={styles.name}>
+          {profile.is_loading ? <Placeholder /> : profile?.user?.fullname}
+        </div>
 
-          <div className={styles.username}>
-            {profile.is_loading ? <Placeholder /> : `~${profile?.user?.username}`}
-          </div>
-
-          <div className={styles.menu}>
-            <Link to={`${URLS.PROFILE_PAGE(username)}/`}>
-              <Icon icon="profile" size={20} />
-              Профиль
-            </Link>
-
-            <Link to={`${URLS.PROFILE_PAGE(username)}/settings`}>
-              <Icon icon="settings" size={20} />
-              Настройки
-            </Link>
-
-            <Link to={`${URLS.PROFILE_PAGE(username)}/messages`}>
-              <Icon icon="messages" size={20} />
-              Сообщения
-            </Link>
-          </div>
+        <div className={styles.username}>
+          {profile.is_loading ? <Placeholder /> : `~${profile?.user?.username}`}
         </div>
       </div>
 
-      {profile && profile.user && profile.user.description && false && (
-        <div className={classNames(styles.description, markdown.wrapper)}>
-          {formatText(profile?.user?.description || '')}
-        </div>
+      {profile && profile.user && profile.user.description && (
+        <Markdown
+          className={styles.description}
+          dangerouslySetInnerHTML={{ __html: formatText(profile.user.description) }}
+        />
       )}
     </div>
   );

src/containers/profile/ProfilePageLeft/styles.module.scss

@@ -1,92 +1,51 @@
 @import "src/styles/variables";
 
 .wrap {
+  @include outer_shadow;
+
+  padding: $gap $gap $gap * 2;
+  box-sizing: border-box;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   flex-direction: column;
+  background: $comment_bg;
+  height: 100%;
+  border-radius: $radius;
 }
 
 .avatar {
   width: 100%;
-  padding-bottom: 75%;
-  border-radius: 0 $radius 0 0;
-  background: 50% 50% no-repeat;
-  background-size: cover;
-}
-
-.region_wrap {
-  width: 100%;
-  // padding: 0 10px;
-  position: relative;
-  margin-top: -$radius;
-  box-sizing: border-box;
+  height: 0;
+  padding-bottom: 100%;
+  margin-bottom: $gap * 2;
 }
 
 .region {
-  // background: $content_bg;
-  background: darken($content_bg, 2%);
   width: 100%;
-  border-radius: 0 $radius $radius 0;
+  text-align: center;
 }
 
 .name {
   font: $font_24_semibold;
   color: white;
-  padding: $gap $gap 0 $gap;
   text-transform: uppercase;
   width: 100%;
   box-sizing: border-box;
+  margin-bottom: 4px;
 }
 
 .username {
-  font: $font_14_semibold;
-  padding: 0 $gap $gap $gap;
+  font: $font_14_regular;
   box-sizing: border-box;
   width: 100%;
   color: transparentize(white, 0.5);
-  margin-top: $gap / 2;
-}
-
-.menu {
-  padding: $gap 0 $gap 0;
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  flex-direction: column;
-  box-sizing: border-box;
-  display: none;
-
-  a {
-    width: 100%;
-    color: inherit;
-    text-decoration: none;
-    text-transform: uppercase;
-    font: $font_18_semibold;
-    padding: $gap $gap;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    opacity: 0.5;
-    box-sizing: border-box;
-    transition: opacity 0.25s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  svg {
-    margin-right: $gap;
-    fill: currentColor;
-  }
 }
 
 .description {
-  padding: $gap;
-  box-sizing: border-box;
-  // background: darken($content_bg, 2%);
-  background: darken($content_bg, 4%);
-  // margin: 0 $gap;
-  border-radius: 0 0 $radius $radius;
+  @include clamp(3, 21px * 3);
+  line-height: 21px;
+  font: $font_14_regular;
+  margin-top: $gap * 3;
+  display: none;
 }