AstralRinth/apps/frontend/src/components/ui/servers/SaveBanner.vue

<template>
  <Transition name="save-banner">
    <div
      v-if="props.isVisible"
      data-pyro-save-banner
      class="fixed bottom-16 left-0 right-0 z-[6] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
    >
      <div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
        <div class="flex flex-col items-center justify-between gap-2 md:flex-row">
          <span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
          <div class="flex gap-2">
            <ButtonStyled type="transparent" color="standard">
              <button :disabled="props.isUpdating" @click="props.reset">Reset</button>
            </ButtonStyled>
            <ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
              <button :disabled="props.isUpdating" @click="props.save">
                {{ props.isUpdating ? "Saving..." : "Save" }}
              </button>
            </ButtonStyled>
            <ButtonStyled v-if="props.restart" type="standard" color="brand">
              <button :disabled="props.isUpdating" @click="saveAndRestart">
                {{ props.isUpdating ? "Saving..." : "Save & restart" }}
              </button>
            </ButtonStyled>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ButtonStyled } from "@modrinth/ui";
import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";

const props = defineProps<{
  isUpdating: boolean;
  restart?: boolean;
  save: () => void;
  reset: () => void;
  isVisible: boolean;
  server: ModrinthServer;
}>();

const saveAndRestart = async () => {
  props.save();
  await props.server.general?.power("Restart");
};
</script>

<style scoped>
.save-banner-enter-active {
  transition:
    opacity 300ms,
    transform 300ms;
}

.save-banner-leave-active {
  transition:
    opacity 200ms,
    transform 200ms;
}

.save-banner-enter-from,
.save-banner-leave-to {
  opacity: 0;
  transform: translateY(100%) scale(0.98);
}

.save-banner-enter-to,
.save-banner-leave-from {
  opacity: 1;
  transform: none;
}
</style>