47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import relativeDate from 'tiny-relative-date';
|
|
import Button from 'component/button';
|
|
import Expandable from 'component/expandable';
|
|
import MarkdownPreview from 'component/common/markdown-preview';
|
|
|
|
type Props = {
|
|
author: string,
|
|
authorUri: string,
|
|
message: string,
|
|
timePosted: number,
|
|
};
|
|
|
|
function Comment(props: Props) {
|
|
const { author, authorUri, timePosted, message } = props;
|
|
|
|
return (
|
|
<li className="comment">
|
|
<div className="comment__meta">
|
|
{!author ? (
|
|
<span className="comment__author">{__('Anonymous')}</span>
|
|
) : (
|
|
<Button
|
|
className="button--uri-indicator truncated-text comment__author"
|
|
navigate={authorUri}
|
|
label={author}
|
|
/>
|
|
)}
|
|
|
|
<time className="comment__time" dateTime={timePosted}>
|
|
{relativeDate(timePosted)}
|
|
</time>
|
|
</div>
|
|
<div>
|
|
<Expandable>
|
|
<div className={'comment__message'}>
|
|
<MarkdownPreview content={message} />
|
|
</div>
|
|
</Expandable>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default Comment;
|