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

<template>
  <div
    v-if="uptimeSeconds || uptimeSeconds !== 0"
    v-tooltip="`Online for ${verboseUptime}`"
    class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-4"
    data-pyro-uptime
  >
    <div v-if="!noSeparator" class="experimental-styles-within h-6 w-0.5 bg-button-border"></div>

    <div class="flex gap-2">
      <UiServersIconsTimer class="flex size-5 shrink-0" />
      <time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
        {{ formattedUptime }}
      </time>
    </div>
  </div>
</template>

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

const props = defineProps<{
  uptimeSeconds: number;
  noSeparator?: boolean;
}>();

const formattedUptime = computed(() => {
  const days = Math.floor(props.uptimeSeconds / (24 * 3600));
  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600);
  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60);
  const seconds = props.uptimeSeconds % 60;

  let formatted = "";
  if (days > 0) {
    formatted += `${days}d `;
  }
  if (hours > 0 || days > 0) {
    formatted += `${hours}h `;
  }
  formatted += `${minutes}m ${seconds}s`;

  return formatted.trim();
});

const verboseUptime = computed(() => {
  const days = Math.floor(props.uptimeSeconds / (24 * 3600));
  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600);
  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60);
  const seconds = props.uptimeSeconds % 60;

  let verbose = "";
  if (days > 0) {
    verbose += `${days} day${days > 1 ? "s" : ""} `;
  }
  if (hours > 0) {
    verbose += `${hours} hour${hours > 1 ? "s" : ""} `;
  }
  if (minutes > 0) {
    verbose += `${minutes} minute${minutes > 1 ? "s" : ""} `;
  }
  verbose += `${seconds} second${seconds > 1 ? "s" : ""}`;

  return verbose.trim();
});
</script>