muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

added icons for fake profile stats

Browse source
This commit is contained in:
Fedor Katurov 2021-10-01 16:17:46 +07:00
parent 3cdc382457
commit 33c17616e9
2 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/containers/profile/ProfilePageStats/index.tsx
View file

@ -1,10 +1,16 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { Icon } from '~/components/input/Icon';
interface Props {} interface Props {}
const Row: FC<{ count: number; title: string }> = ({ count, title }) => ( const Row: FC<{ count: number; title: string; icon?: string }> = ({ count, title, icon }) => (
<div className={styles.row}> <div className={styles.row}>
{icon && (
<div className={styles.icon}>
<Icon icon={icon} size={24} />
</div>
)}
<div className={styles.counter}>{count > 999 ? '999+' : count}</div> <div className={styles.counter}>{count > 999 ? '999+' : count}</div>
<div className={styles.title}>{title}</div> <div className={styles.title}>{title}</div>
</div> </div>
@ -14,7 +20,8 @@ const ProfilePageStats: FC<Props> = () => (
<div className={styles.wrap}> <div className={styles.wrap}>
<Row count={9} title="лет в бункере" /> <Row count={9} title="лет в бункере" />
<Row count={99} title="постов" /> <Row count={99} title="постов" />
<Row count={99999} title="комментариев" /> <Row count={99999} title="комментариев" icon="comment" />
<Row count={99} title="лайков" icon="heart_full" />
</div> </div>
); );

10
src/containers/profile/ProfilePageStats/styles.module.scss
View file

@ -24,6 +24,7 @@
padding: $gap; padding: $gap;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
position: relative;
} }
.counter { .counter {
@ -41,3 +42,12 @@
word-wrap: break-word; word-wrap: break-word;
opacity: 0.5; opacity: 0.5;
} }
.icon {
position: absolute;
opacity: 0.5;
top: 5px;
left: 5px;
fill: transparentize(black, 0.5);
stroke: none;
}