added user profile popup

src/components/common/Avatar/index.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import { getURLFromString } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { openUserProfile } from '~/utils/user';
+import { DivProps } from '~/utils/types';
+
+interface Props extends DivProps {
+  url?: string;
+  username?: string;
+  size?: number;
+  innerRef?: React.Ref<any>;
+}
+
+const Avatar: FC<Props> = ({ url, username, size, className, innerRef, ...rest }) => {
+  const backgroundImage = !!url ? `url('${getURLFromString(url, PRESETS.avatar)}')` : undefined;
+  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+
+  return (
+    <div
+      {...rest}
+      className={classNames(styles.avatar, className)}
+      style={{ backgroundImage }}
+      onClick={onOpenProfile}
+      ref={innerRef}
+    />
+  );
+};
+
+export { Avatar };

src/components/common/Avatar/styles.module.scss

@@ -0,0 +1,19 @@
+@import "~/styles/variables";
+
+.avatar {
+  @include outer_shadow;
+
+  width: $comment_height;
+  height: $comment_height;
+  background-color: transparentize(black, 0.9);
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: $radius;
+  background-position: center;
+  background-size: cover;
+  cursor: pointer;
+
+  img {
+    object-fit: cover;
+  }
+}