ShowEasyFrontEnd/FrontEnd/components/newComponent/notifications/notifications.vue

<template>
  <client-only>
    <notifications position="top center" class="my-notification tw-top-[84px] xl:tw-top-[144px] tw-w-max">
      <template slot="body" slot-scope="props">
        <div :class="[
          'custom-template tw-flex tw-items-center tw-px-[20px] tw-py-[14px] tw-rounded-[16px]',
          props.item.type == 'error' ?'tw-bg-error-background':'',
          props.item.type == 'warn' ?'tw-bg-warning-background':'',
          props.item.type == 'success' ?'tw-bg-success-background':''
        ]">
          <div v-if="props.item.type == 'error'" class="custom-template-icon tw-flex tw-items-center  tw-mr-[18px]">
            <img src="~/assets/svg/notification-error.svg" />
            <div class="tw-ml-[12px] tw-text-error-default t16">Oops!</div>
          </div>
          <div v-if="props.item.type == 'warn'" class="custom-template-icon tw-flex tw-items-center tw-mr-[25px]">
            <img src="~/assets/svg/notification-warn.svg" />
            <div class="tw-ml-[12px] tw-text-warning-default t16">Ohh,</div>
          </div>
          <div v-if="props.item.type == 'success'" class="custom-template-icon  tw-mr-[18px]">
            <img src="~/assets/svg/notification-success.svg" />
          </div>

          <div class="custom-template-content tw-flex tw-items-center">
            <div :class="[
              'tw-font-bold tw-bg-transparent custom-template-title tw-mr-[16px]',
              props.item.type == 'error' ?'tw-text-error-default':'',
          props.item.type == 'warn' ?'tw-text-warning-default':'',
          props.item.type == 'success' ?'tw-text-success-default':''
            ]">
              {{ $t(props.item.title) }}
            </div>
            <div :class="[
              'custom-template-text tw-bg-transparent',
              props.item.type == 'error' ?'tw-text-error-default':'',
          props.item.type == 'warn' ?'tw-text-warning-default':'',
          props.item.type == 'success' ?'tw-text-success-default':''
            ]" v-html="$t(props.item.text)"></div>
          </div>
          <div class="custom-template-close tw-ml-[20px]" @click="props.close">
            <div v-if="props.item.type == 'error'">
              <img src="~/assets/svg/close-error.svg" width="10" height="10" />
            </div>
            <div v-if="props.item.type == 'warn'">
              <img src="~/assets/svg/close-warn.svg" width="10" height="10" />
            </div>
            <div v-if="props.item.type == 'success'">
              <img src="~/assets/svg/close-success.svg" width="10" height="10" />
            </div>
          </div>
        </div>
      </template>
    </notifications>
  </client-only>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
// style of the notification itself
:deep() {
  .my-notification {

    // style for title line
    .notification-title {}

    // style for content
    .notification-content {}

    // additional styling hook when using`type` parameter, i.e. this.$notify({ type: 'success', message: 'Yay!' })
    .custom-template {
      &.success {
        background-color: #f1fffb !important;
        box-shadow: 0px 2px 2px rgba(137, 138, 141, 0.1) !important;
      }

      &.warn {
        background-color: #fffaee !important;
        box-shadow: 0px 2px 2px rgba(137, 138, 141, 0.1) !important;
      }

      &.error {
        background-color: #fff7f4 !important;
        box-shadow: 0px 2px 2px rgba(137, 138, 141, 0.1) !important;
      }
    }

    .custom-template-text {
      &.success {
        color: #2dc695;
        background-color: transparent !important;
      }

      &.warn {
        color: #ffb70a;
        background-color: transparent !important;
      }

      &.error {
        color: #ef5a5a;
        background-color: transparent !important;
      }
    }
  }
}
</style>