change user profile page layout

src/constants/api.ts

@@ -11,7 +11,7 @@ export const API = {
     ME: '/auth',
     UPDATE_PHOTO: '/auth/photo',
     UPDATE_COVER: '/auth/photo',
-    PROFILE: (username: string) => `/users/${username}/profile`,
+    PROFILE: (username: string) => `/users/${username}`,
     MESSAGES: (username: string) => `/users/${username}/messages`,
     MESSAGE_SEND: (username: string) => `/users/${username}/messages`,
     MESSAGE_DELETE: (username: string, id: number) =>

src/containers/profile/ProfilePageLeft/index.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import { Avatar } from '~/components/common/Avatar';
+import { Card } from '~/components/common/Card';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { imagePresets } from '~/constants/urls';
 import { IUser } from '~/types/auth';
@@ -11,11 +12,18 @@ interface Props {
   profile: IUser;
   isLoading: boolean;
   username: string;
+  description: string;
 }
 
-const ProfilePageLeft: FC<Props> = ({ username, profile, isLoading }) => {
+const ProfilePageLeft: FC<Props> = ({
+  username,
+  profile,
+  description,
+  isLoading,
+}) => {
   return (
-    <div className={styles.wrap}>
+    <Card className={styles.wrap} elevation={0} seamless>
+      <Card seamless>
         <Avatar
           username={username}
           url={profile?.photo?.url}
@@ -32,7 +40,11 @@ const ProfilePageLeft: FC<Props> = ({ username, profile, isLoading }) => {
             {isLoading ? <Placeholder /> : `~${profile?.username}`}
           </div>
         </div>
+      </Card>
+      <div className={styles.region}>
+        <div className={styles.description}>{description}</div>
       </div>
+    </Card>
   );
 };
 

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

@@ -1,29 +1,26 @@
 @import 'src/styles/variables';
 
 .wrap {
-  @include outer_shadow;
-  @include blur;
-
-  padding: $gap $gap $gap * 2;
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   flex-direction: column;
-  height: 100%;
   border-radius: $radius;
 }
 
+.top {
+  padding: 0;
+}
+
 .avatar {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
-  margin-bottom: $gap * 2;
 }
 
 .region {
-  width: 100%;
+  padding: $gap;
-  text-align: center;
 }
 
 .name {
@@ -44,8 +41,7 @@
 
 .description {
   @include clamp(3, 21px * 3);
-  line-height: 21px;
   font: $font_14_regular;
-  margin-top: $gap * 3;
+  line-height: 1.25em;
-  display: none;
+  opacity: 0.5;
 }

src/layouts/ProfileLayout/index.tsx

@@ -2,7 +2,10 @@ import { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
+import { Card } from '~/components/common/Card';
 import { Container } from '~/components/common/Container';
+import { Sticky } from '~/components/common/Sticky';
+import { FlowGrid } from '~/containers/flow/FlowGrid';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
 import { useUser } from '~/hooks/auth/useUser';
 import { useGetProfile } from '~/hooks/profile/useGetProfile';
@@ -24,16 +27,21 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
     <Container className={styles.wrap}>
       <div className={styles.grid}>
         <div className={styles.stamp}>
-          <div className={styles.row}>
+          <Sticky>
             <ProfilePageLeft
+              description={profile.description}
               profile={profile}
               username={username}
               isLoading={isLoading}
             />
-          </div>
+          </Sticky>
         </div>
 
-        <div>here should be grid</div>
+        <Card className={styles.description}>{profile.description}</Card>
+
+        <div className={styles.nodes}>
+          <FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
+        </div>
       </div>
     </Container>
   );

src/layouts/ProfileLayout/styles.module.scss

@@ -8,7 +8,10 @@
 }
 
 .grid {
-  @include flow_grid;
+  grid-template-columns: 250px 5fr;
+  display: grid;
+  column-gap: $gap;
+  row-gap: $gap;
 }
 
 .row {
@@ -18,10 +21,18 @@
 
 .description {
   font: $font_14_semibold;
-  text-align: center;
-  padding: $gap * 2 $gap;
 }
 
 .stamp {
   grid-row-end: span 2;
 }
+
+.nodes {
+  @include flow_grid();
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}