diff --git a/src/containers/profile/ProfilePageStats/index.tsx b/src/containers/profile/ProfilePageStats/index.tsx index 53ae4674..432a3689 100644 --- a/src/containers/profile/ProfilePageStats/index.tsx +++ b/src/containers/profile/ProfilePageStats/index.tsx @@ -1,10 +1,16 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; +import { Icon } from '~/components/input/Icon'; interface Props {} -const Row: FC<{ count: number; title: string }> = ({ count, title }) => ( +const Row: FC<{ count: number; title: string; icon?: string }> = ({ count, title, icon }) => (
+ {icon && ( +
+ +
+ )}
{count > 999 ? '999+' : count}
{title}
@@ -14,7 +20,8 @@ const ProfilePageStats: FC = () => (
- + +
); diff --git a/src/containers/profile/ProfilePageStats/styles.module.scss b/src/containers/profile/ProfilePageStats/styles.module.scss index a943ab8a..8cd17f7b 100644 --- a/src/containers/profile/ProfilePageStats/styles.module.scss +++ b/src/containers/profile/ProfilePageStats/styles.module.scss @@ -24,6 +24,7 @@ padding: $gap; box-sizing: border-box; height: 100%; + position: relative; } .counter { @@ -41,3 +42,12 @@ word-wrap: break-word; opacity: 0.5; } + +.icon { + position: absolute; + opacity: 0.5; + top: 5px; + left: 5px; + fill: transparentize(black, 0.5); + stroke: none; +}