2 files changed, 55 insertions, 0 deletions
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
new file mode 100644
index 00000000..c7bd2a2b
--- /dev/null
+++ b/src/components/reply_button/reply_button.js
@@ -0,0 +1,16 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faReply } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faReply)
+
+const ReplyButton = {
+  name: 'ReplyButton',
+  props: ['status', 'replying'],
+  computed: {
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
+    }
+  }
+}
+
+export default ReplyButton
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
new file mode 100644
index 00000000..a0ac8941
--- /dev/null
+++ b/src/components/reply_button/reply_button.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <FAIcon
+      v-if="loggedIn"
+      class="ReplyButton fa-scale-110 fa-old-padding -interactive"
+      icon="reply"
+      :title="$t('tool_tip.reply')"
+      :class="{'-active': replying}"
+      @click.prevent="$emit('toggle')"
+    />
+    <FAIcon
+      v-else
+      icon="reply"
+      class="ReplyButton fa-scale-110 fa-old-padding"
+      :title="$t('tool_tip.reply')"
+    />
+    <span v-if="status.replies_count > 0">
+      {{ status.replies_count }}
+    </span>
+  </div>
+</template>
+
+<script src="./reply_button.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.ReplyButton {
+  &.-interactive {
+    cursor: pointer;
+
+    &:hover,
+    &.-active {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+  }
+}
+</style>