diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 0cfaf0368..c6a88178f 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -238,7 +238,12 @@ class Stream extends React.Component {
:
{asset.settings.closedMessage}
}
-
+
{loggedIn && (
{
+ return (
+
+ );
+};
+
+export default FeaturedComment;
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js
new file mode 100644
index 000000000..cd8c360dd
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './styles.css';
+import FeaturedComment from './FeaturedComment';
+
+const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length;
+
+class FeaturedComments extends React.Component {
+ render() {
+
+ const {view : comments} = this.props;
+
+ const featuredComments = comments.reduce((acc, curr) => {
+ if (isFeatured(curr.tags)) {
+ acc.push(curr);
+ }
+
+ return acc;
+ }, []);
+
+ return (
+
+ {
+ featuredComments.map((comment, i) =>
+
+ )
+ }
+
+ );
+ }
+}
+
+export default FeaturedComments;
diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css
index 9bca2406c..266f7d2da 100644
--- a/plugins/talk-plugin-featured-comments/client/components/styles.css
+++ b/plugins/talk-plugin-featured-comments/client/components/styles.css
@@ -22,7 +22,7 @@
}
.tag {
- background: #f7917a;
+ background-color: #f7917a;
font-size: 12px;
font-weight: bold;
color: white;
@@ -30,4 +30,10 @@
margin: 0px 5px;
padding: 5px 5px;
border-radius: 2px;
+}
+
+.featuredComments {
+ padding: 20px;
+ background-color: #f9f9f9;
+ margin: 10px 0;
}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 613d70d13..9bed9f46e 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -1,11 +1,13 @@
import translations from './translations.json';
import FeaturedTag from './components/FeaturedTag';
import FeaturedButton from './components/FeaturedButton';
+import FeaturedComments from './components/FeaturedComments';
export default {
translations,
slots: {
commentInfoBar: [FeaturedTag],
- commentReactions: [FeaturedButton]
+ commentReactions: [FeaturedButton],
+ stream: [FeaturedComments]
}
};