Add favorite-button.

2 files changed, 36 insertions, 0 deletions

diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
new file mode 100644
index 00000000..0a8843ea
--- /dev/null
+++ b/src/components/favorite_button/favorite_button.js
@@ -0,0 +1,22 @@
+const FavoriteButton = {
+  props: [ 'status' ],
+  methods: {
+    favorite () {
+      if (!this.status.favorited) {
+        this.$store.dispatch('favorite', { id: this.status.id})
+      } else {
+        this.$store.dispatch('unfavorite', { id: this.status.id})
+      }
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'icon-star-empty': !this.status.favorited,
+        'icon-star': this.status.favorited
+      }
+    }
+  }
+}
+
+export default FavoriteButton
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
new file mode 100644
index 00000000..0455c706
--- /dev/null
+++ b/src/components/favorite_button/favorite_button.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i>
+    <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
+  </div>
+</template>
+
+<script src="./favorite_button.js" ></script>
+
+<style>
+ .favorite-button {
+     cursor: pointer
+ }
+</style>