UnivateProperties/src/components/shared/alert.vue

<template>
  <div class="container">
    <!-- eslint-disable max-len -->
    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myInfo" v-if="type === 'INFO'">
      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myWarning" v-if="type === 'WARNING'">
      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myError" v-if="type === 'ERROR'">
      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  data() {
    return {
      alertTypes: {
        SUCCESS: 'Success',
        INFO: 'Info',
        WARNING: 'Warning',
        ERROR: 'Error',
      },
    };
  },
  props: {
    text: null,
    type: null,
  },
};
</script>

<style>
.color-black {
  color: black;
}
</style>