LoongPanel-Asp/web/components/Notification.vue

<script lang="ts" setup>
import type {PropType} from "vue";

const props = defineProps({
  label: String,
  cardType: String as PropType<'Error' | 'Informative' | 'Success' | 'Warning'>,
  time: Number,
  text: String,
})

const notificationBoxClass = computed(() => ({
  'Notification-Box': true,
  'Notification-Box-Error': props.cardType === 'Error',
  'Notification-Box-Informative': props.cardType === 'Informative',
  'Notification-Box-Success': props.cardType === 'Success',
  'Notification-Box-Warning': props.cardType === 'Warning'
}));
</script>

<template>
  <div :class="notificationBoxClass">
    <div class="Icon">
      <NuxtImg v-if="cardType==='Success'" src="/Success.svg" width="24"></NuxtImg>
      <NuxtImg v-if="cardType==='Informative'" src="/Informative.svg" width="24"></NuxtImg>
      <NuxtImg v-if="cardType==='Warning'" src="/Warning.svg" width="24"></NuxtImg>
      <NuxtImg v-if="cardType==='Error'" src="/Error.svg" width="24"></NuxtImg>
    </div>
    <div class="Text">
      <h3>{{ label }}</h3>
      <p>{{ text }}</p>
    </div>
    <Icon :stroke-width="1.2" name="X"></Icon>
  </div>
</template>

<style lang="scss" scoped>
@import "base";

.Notification-Box {
  padding: $padding;
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  gap: $gap*2;
  grid-template-rows: 1fr;
  border-radius: 12px;

  > svg {
    stroke: #979FA9;

    .dark-mode & {
      stroke: #FFF;
    }
  }
}

.Icon {
  .dark-mode & {
    filter: grayscale(30%) brightness(100%);
  }
}

.Text {
  display: flex;
  flex-direction: column;
  gap: $gap*.5;

  .dark-mode & {
    > h3, p {
      color: #FFF;
    }

  }

  > h3 {
    color: #27303A;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    text-transform: capitalize;
  }

  > p {
    color: #2F3F53;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 19.2px */
  }
}


.Notification-Box-Success {
  border: 1.3px solid #48C1B5;
  background: #F6FFF9;

  .dark-mode & {
    border: 1.3px solid #43D590;
    background: unset;
  }

}

.Notification-Box-Informative {

  border: 1.3px solid #9DC0EE;
  background: #F5F9FF;

  .dark-mode & {
    border: 1.3px solid #7BCFED;
    background: unset;
  }
}

.Notification-Box-Warning {
  border: 1.3px solid #F7D9A4;
  background: #FFF8EC;

  .dark-mode & {
    border: 1.3px solid #FFDF8D;
    background: unset;
  }
}

.Notification-Box-Error {
  border: 1.3px solid #F4B0A1;
  background: #FFF5F3;

  .dark-mode & {
    border: 1.3px solid #F0863A;
    background: unset;
  }
}
</style>