added sample data to profile sidebar

src/components/common/Square/index.tsx

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

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

@@ -9,4 +9,13 @@
   border-radius: $radius;
   background-size: cover;
   background-repeat: no-repeat;
+  position: relative;
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }