Pluginize timestamp

plugins/talk-plugin-featured-comments/client/components/Comment.css

@@ -64,4 +64,8 @@
 
 .actionsContainer {
   text-align: right;
-}
+}
+
+.timestamp {
+  padding-left: 6px;
+}

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {t, timeago} from 'plugin-api/beta/client/services';
-import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
+import {t} from 'plugin-api/beta/client/services';
+import {Slot, CommentAuthorName, PubDate} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
 import FeaturedButton from '../containers/FeaturedButton';
@@ -15,6 +15,7 @@ class Comment extends React.Component {
 
   render() {
     const {comment, asset, root, data} = this.props;
+    const queryData = {comment, asset, root};
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
 
@@ -28,14 +29,20 @@ class Comment extends React.Component {
             className={cn(styles.username, `${pluginName}-comment-username`)}
             fill="commentAuthorName"
             defaultComponent={CommentAuthorName}
-            queryData={{comment, asset, root}}
+            queryData={queryData}
             data={data}
             inline
           />
 
-          <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
-            ,{' '}{timeago(comment.created_at)}
-          </span>
+          <Slot
+            fill="commentTimestamp"
+            defaultComponent={PubDate}
+            className={cn(styles.timestamp, `${pluginName}-comment-timeago`)}
+            created_at={comment.created_at}
+            data={data}
+            queryData={queryData}
+            inline
+          />
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>