fixed node related item profile popout

src/components/common/Avatar/index.tsx

@@ -1,40 +1,34 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, forwardRef, 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';
+import { Square } from '~/components/common/Square';
 
 interface Props extends DivProps {
   url?: string;
   username?: string;
   size?: number;
   preset?: typeof PRESETS[keyof typeof PRESETS];
-  innerRef?: React.Ref<any>;
 }
 
-const Avatar: FC<Props> = ({
-  url,
-  username,
-  size,
-  className,
-  innerRef,
-  preset = PRESETS.avatar,
-  ...rest
-}) => {
-  const backgroundImage = !!url ? `url('${getURLFromString(url, preset)}')` : undefined;
-  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+const Avatar = forwardRef<HTMLDivElement, Props>(
+  ({ url, username, size, className, preset = PRESETS.avatar, ...rest }, ref) => {
+    const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
 
-  return (
-    <div
-      {...rest}
-      className={classNames(styles.avatar, className)}
-      style={{ backgroundImage }}
-      onClick={onOpenProfile}
-      ref={innerRef}
-    />
-  );
-};
+    return (
+      <Square
+        {...rest}
+        image={getURLFromString(url, preset)}
+        className={classNames(styles.avatar, className)}
+        onClick={onOpenProfile}
+        size={size}
+        ref={ref}
+      />
+    );
+  }
+);
 
 export { Avatar };

src/components/common/Square/index.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, ForwardRefRenderFunction, VFC } from 'react';
+import styles from './styles.module.scss';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+
+interface SquareProps extends DivProps {
+  image: string;
+  size?: number;
+}
+
+const Square = forwardRef<HTMLDivElement, SquareProps>(({ image, size, ...rest }, ref) => {
+  const backgroundImage = image ? `url('${image}')` : undefined;
+
+  return (
+    <div
+      {...rest}
+      className={classNames(styles.wrapper, rest.className)}
+      style={{ backgroundImage, width: size }}
+      ref={ref}
+    >
+      <svg className={styles.svg} viewBox="0 0 1 1" />
+    </div>
+  );
+});
+
+export { Square };

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

@@ -0,0 +1,10 @@
+@import "src/styles/variables";
+
+.svg {
+  width: 100%;
+}
+
+.wrapper {
+  width: 100%;
+  border-radius: $radius;
+}