index.js

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/pt-br'

dayjs.locale('pt-br')
dayjs.extend(relativeTime)

export default (_, inject) => {
  inject('dayjs', dayjs)
}

NotificationItem.vue

<template>
  <div class="NotificationItem">
    <div class="NotificationItem__avatar">
      <f-avatar :src="item.avatar || ''" />
    </div>

    <f-item class="NotificationItem__wrapper">
      <div class="NotificationItem__content">
        <p class="NotificationItem__content__msg" v-html="item.message" />
        <p class="NotificationItem__content__time">{{ itemTime }}</p>
      </div>
      <div v-if="!hideFlags" class="NotificationItem__actions">
        <f-tooltip position="bottom" bg-color="primary">
          <f-icon name="flag" lib="flux" type="outlined" :color="iconColor" />
          <span slot="content">{{ flagText }}</span>
        </f-tooltip>
      </div>
    </f-item>
  </div>
</template>

<script>
export default {
  name: 'NotificationItem',

  props: {
    item: {
      type: Object,
      required: true
    },
    hideFlags: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    iconColor() {
      const relevanceColors = {
        baixa: 'green-400',
        media: 'orange-400',
        alta: 'red-600'
      }

      return relevanceColors[this.item.relevance]
    },
    flagText() {
      const relevanceTexts = {
        baixa: 'Prioridade baixa',
        media: 'Prioridade média',
        alta: 'Prioridade alta'
      }

      return relevanceTexts[this.item.relevance]
    },
    itemTime() {
      const itemDate = this.$dayjs(this.item.date)
      return itemDate.fromNow()
    }
  }
}
</script>

<style lang="scss">
.NotificationItem {
  display: flex;

  &__avatar {
    display: flex;
    align-items: center;
  }

  &__wrapper {
    display: flex !important;
    width: 100%;
  }

  &__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &__msg {
      font-size: 14px;
      color: #999999;

      em {
        font-style: normal;
        font-weight: bold;
        font-size: inherit;
      }
    }

    &__time {
      color: #999999;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
  }
}
</style>

NotificationList.vue

<template>
  <f-list class="NotificationList">
    <notification-item v-for="item in items" :key="item.id" :item="item" />
  </f-list>
</template>

<script>
import { NotificationItem } from '@/components/molecules'

export default {
  name: 'NotificationList',

  components: { NotificationItem },

  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss">
.NotificationList {
}
</style>