1 files changed, 52 insertions, 0 deletions
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
new file mode 100644
index 00000000..cf287ce9
--- /dev/null
+++ b/vnext/src/components/Message.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class Message extends React.Component {
+  render() { 
+    const msg = this.props.data;
+    return (
+    <article itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
+      <header className="h">
+        <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
+            <a href={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{ msg.user.uname }</span></a>
+        </span>
+        <div className="msg-avatar"><a href={`/${msg.user.uname }/`}>
+            <img src={`//i.juick.com/a/${msg.user.uid}.png`} alt={`${msg.user.uname}`} /></a>
+        </div>
+        <div className="msg-ts">
+            <a href={`/${msg.user.uname}/${msg.mid}`}>
+                <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
+                      title={msg.timestamp}>
+                    {msg.timestamp}
+                </time>
+            </a>
+        </div>
+        <div className="msg-tags" itemProp="headline">
+            <Tags data={msg.tags || []} />
+        </div>
+      </header>
+      <p>{msg.body}</p>
+      { msg.photo && 
+      <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}>
+        <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt=""/></a>
+      </p>
+      }
+    </article>
+    )}
+};
+
+function Tags(props) {
+    return props.data && props.data.map(tag => { return (<a key={tag} href={`/tag/${ tag}`} title={ tag }>{ tag }</a>) })
+}
+
+Message.propTypes = {
+    msg: PropTypes.shape({
+    mid: PropTypes.number.isRequired,
+    user: PropTypes.shape({
+      uid: PropTypes.number.isRequired,
+      uname: PropTypes.string.isRequired
+    }),
+    timestamp: PropTypes.string.isRequired,
+    body: PropTypes.string
+    })
+}