Components -> UI

1 files changed, 44 insertions, 0 deletions

diff --git a/vnext/src/ui/Avatar.js b/vnext/src/ui/Avatar.js
new file mode 100644
index 00000000..dda5449f
--- /dev/null
+++ b/vnext/src/ui/Avatar.js
@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { UserType } from './Types';
+
+import Icon from './Icon';
+
+import './Avatar.css';
+
+function Avatar({ user, style, link, children}) {
+    return (
+        <div className="Avatar" style={style}>
+            <div className="msg-avatar">
+                {
+                    user.uname ?
+                        <Link to={{ pathname: link || `/${user.uname}/` }}>
+                            {user.avatar ?
+                                <img src={user.avatar} alt={`${user.uname}`} />
+                                : <Icon name="ei-spinner" size="m" />}
+                        </Link>
+                        : <Icon name="ei-spinner" size="m" />
+                }
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                <span>
+                    <Link to={{ pathname: `/${user.uname}/` }}>
+                        <span>{user.uname}</span>
+                    </Link>
+                </span>
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default memo(Avatar);
+
+Avatar.propTypes = {
+    user: UserType,
+    link: PropTypes.string,
+    style: PropTypes.object,
+    children: PropTypes.node
+};