Adding a slot to push like into featured comments 😎

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

@@ -3,29 +3,42 @@ import cn from 'classnames';
 import styles from './FeaturedComment.css';
 import {name} from '../../package.json';
 import {timeago} from 'coral-framework/services/i18n';
+import {Slot} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const FeaturedComment = ({comment, setActiveTab}) => {
   return (
     <div className={cn(styles.featuredComment, `${name}__featured-comment`)}>
+
       <blockquote className={cn(styles.quote, `${name}__featured-comment__comment-body`)}>
         {comment.body}
       </blockquote>
-      <footer>
-        <div>
-          <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
-            {comment.user.username}
-          </strong>
-          <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
-            ,{' '}{timeago(comment.created_at)}
-          </span>
+
+      <div className={cn(`${name}__featured-comment__username-box`)}>
+        <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
+          {comment.user.username}
+        </strong>
+        <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
+          ,{' '}{timeago(comment.created_at)}
+        </span>
+      </div>
+
+      <footer className={cn(styles.footer, `${name}__featured-comment__footer`)}>
+        <div className={cn(styles.reactionsContainer, `${name}__featured-comment__reactions`)}>
+          <Slot
+            fill="featuredCommentsReactions"
+            comment={comment}
+            commentId={comment.id}
+            inline
+          />
+        </div>
+        <div className={cn(styles.actionsContainer, `${name}__featured-comment__actions`)}>
+          <a className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
+            onClick={() => setActiveTab('all')} >
+            <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} |
+            Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
+          </a>
         </div>
-        <a 
-          className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
-          onClick={() => setActiveTab('all')}
-        >
-          Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
-        </a>
       </footer>
     </div>
   );