mealie/frontend/app/components/Layout/LayoutParts/TheSnackbar.vue

<template>
  <div class="text-center">
    <v-snackbar
      v-model="toastAlert.open"
      location="top"
      :color="toastAlert.color"
      :timeout="toastAlert.timeout ?? 2000"
    >
      <v-icon
        v-if="icon"
        dark
        start
        :icon="icon"
      />

      {{ toastAlert.title }}
      {{ toastAlert.text }}

      <template #actions>
        <v-btn
          variant="text"
          @click="() => {
            toastAlert.action?.onClick();
            toastAlert.open = false
          }"
        >
          {{ toastAlert.action?.message ?? $t('general.close') }}
        </v-btn>
      </template>
    </v-snackbar>
    <v-snackbar
      v-model="toastLoading.open"
      content-class="py-2"
      density="compact"
      location="bottom"
      :timeout="-1"
      :color="toastLoading.color"
    >
      <div
        class="d-flex flex-column align-center justify-start"
        @click="toastLoading.open = false"
      >
        <div class="mb-2 mt-0 text-subtitle-1 text-center">
          {{ toastLoading.text }}
        </div>
        <v-progress-linear
          indeterminate
          color="white-darken-2"
        />
      </div>
    </v-snackbar>
  </div>
</template>

<script setup lang="ts">
import { useNuxtApp } from "#app";
import { toastAlert, toastLoading } from "~/composables/use-toast";

const { $globals } = useNuxtApp();
const icon = computed(() => {
  switch (toastAlert.color) {
    case "error":
      return $globals.icons.alertOutline;
    case "success":
      return $globals.icons.checkBold;
    case "info":
      return $globals.icons.informationOutline;
    default:
      return $globals.icons.alertOutline;
  }
});
</script>