diff --git a/src/containers/profile/ProfilePageStats/index.tsx b/src/containers/profile/ProfilePageStats/index.tsx new file mode 100644 index 00000000..53ae4674 --- /dev/null +++ b/src/containers/profile/ProfilePageStats/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; +import styles from './styles.module.scss'; + +interface Props {} + +const Row: FC<{ count: number; title: string }> = ({ count, title }) => ( + <div className={styles.row}> + <div className={styles.counter}>{count > 999 ? '999+' : count}</div> + <div className={styles.title}>{title}</div> + </div> +); + +const ProfilePageStats: FC<Props> = () => ( + <div className={styles.wrap}> + <Row count={9} title="лет в бункере" /> + <Row count={99} title="постов" /> + <Row count={99999} title="комментариев" /> + </div> +); + +export { ProfilePageStats }; diff --git a/src/containers/profile/ProfilePageStats/styles.module.scss b/src/containers/profile/ProfilePageStats/styles.module.scss new file mode 100644 index 00000000..a943ab8a --- /dev/null +++ b/src/containers/profile/ProfilePageStats/styles.module.scss @@ -0,0 +1,43 @@ +@import "~/styles/variables"; + +.wrap { + @include outer_shadow; + + padding: $gap; + background: $content_bg; + border-radius: $radius; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + grid-row-gap: $gap; + grid-column-gap: $gap; + grid-auto-flow: row; + + & > .row:not(:last-child) { + margin-bottom: $gap; + } +} + +.row { + width: 100%; + background-color: lighten($content_bg, 4%); + border-radius: $radius; + padding: $gap; + box-sizing: border-box; + height: 100%; +} + +.counter { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font: $font_32_bold; + height: 60px; +} + +.title { + font: $font_12_semibold; + text-align: center; + word-wrap: break-word; + opacity: 0.5; +} diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx index 24b6dca9..27f1df73 100644 --- a/src/layouts/ProfileLayout/index.tsx +++ b/src/layouts/ProfileLayout/index.tsx @@ -11,6 +11,7 @@ import { FlowGrid } from '~/components/flow/FlowGrid'; import { FlowLayout } from '~/layouts/FlowLayout'; import { Sticky } from '~/components/containers/Sticky'; import { selectFlow } from '~/redux/flow/selectors'; +import { ProfilePageStats } from '~/containers/profile/ProfilePageStats'; type Props = RouteComponentProps<{ username: string }> & {}; @@ -34,7 +35,12 @@ const ProfileLayout: FC<Props> = ({ <Container className={styles.wrap}> <div className={styles.left}> <Sticky> - <ProfilePageLeft profile={profile} username={username} /> + <div className={styles.row}> + <ProfilePageLeft profile={profile} username={username} /> + </div> + <div className={styles.row}> + <ProfilePageStats /> + </div> </Sticky> </div> diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss index aa05c21f..5f1f1c20 100644 --- a/src/layouts/ProfileLayout/styles.module.scss +++ b/src/layouts/ProfileLayout/styles.module.scss @@ -14,3 +14,7 @@ .right { } + +.row { + margin-bottom: $gap; +}