<template>
  <div class="bookmark-tile" @click="click">
      <font-awesome-icon icon="external-link-alt"/>
      {{bookmark.bookmarkName}}
  </div>
</template>

<script>
export default {
  props: ["bookmark"],
  methods: {
    click() {
      this.$emit("clicked", this.bookmark);
    },
  },
};
</script>

<style>
.bookmark-tile {
  padding: 5px 25px;
}

.bookmark-tile, .bookmark-tile svg {
  cursor: pointer;
  font-size: 16px;
  color: #ccc;
}

.bookmark-tile:hover, .bookmark-tile:hover svg {
  color: #fff;
}


</style>
