scinote-web/app/javascript/vue/repository_item_sidebar/reminder.vue

<template v-if="value?.reminder === true">
  <div class="inline-block float-right cursor-pointer relative" :title="reminderTitle"
     tabindex='-1'>
    <i class="sn-icon sn-icon-notifications row-reminders-icon"></i>
    <span :class="`inline-block absolute rounded-full w-2 h-2 right-1 top-0.5 ${reminderColor}`"></span>
  </div>
</template>

<script>
export default {
  name: 'Reminder',
  props: {
    value: null
  },
  computed: {
    reminderColor() {
      if (this.value?.reminder && (this.value?.stock_amount > 0 || this.value?.days_left > 0)) {
        return 'bg-sn-alert-brittlebush';
      }
      return 'bg-sn-alert-passion';
    },
    reminderTitle() {
      let title = this.value?.reminder_text;
      if (this.value?.reminder_message) title = `${title}\n${this.value?.reminder_message}`;

      return title;
    }
  }
};
</script>