diff options
author | 2017-12-20 14:57:52 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | aaa6a3a3e3d6c73139fd44498e034c1460ecfcae (patch) | |
tree | 5d828069484fe5af49bec8b0540f6a5ae6a64fe9 /vnext/src/components/Message.js | |
parent | 359f345ab5739bbd258da9b8a0b053005e392ead (diff) |
jsx -> js
Diffstat (limited to 'vnext/src/components/Message.js')
-rw-r--r-- | vnext/src/components/Message.js | 52 |
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 + }) +} |