1 files changed, 41 insertions, 0 deletions
diff --git a/vnext/src/components/Users.js b/vnext/src/components/Users.js
new file mode 100644
index 00000000..4201e1e0
--- /dev/null
+++ b/vnext/src/components/Users.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { UserType } from './Types';
+
+export function Friends({ visitor, ...rest }) {
+    return <Users data={visitor.read || []} />;
+}
+
+export function Readers({ visitor, ...rest }) {
+    return <Users data={ visitor.readers || [] } />;
+}
+
+function Users({data, ...rest}) {
+    return (
+        <div className="users">
+            {
+                data.map(user => <span key={user.uid}>
+                        <Link to={`/${user.uname}/`}>
+                        <img src={`//i.juick.com/as/${user.uid}.png`} />
+                        <span>{user.uname}</span>
+                        </Link>
+                    </span>)
+            }
+        </div>
+    );
+}
+
+
+Friends.propTypes = {
+    visitor: UserType
+};
+
+Readers.propTypes = {
+    visitor: UserType
+};
+
+Users.propTypes = {
+    data: PropTypes.arrayOf(UserType).isRequired
+}