Modrinth-plus/apps/frontend/src/components/ui/servers/ServerGameLabel.vue

<template>
  <div
    v-if="game"
    v-tooltip="'Change server version'"
    class="min-w-0 flex-none flex-row items-center gap-2 first:!flex"
  >
    <GameIcon aria-hidden="true" class="size-5 shrink-0" />
    <NuxtLink
      v-if="isLink"
      :to="serverId ? `/servers/manage/${serverId}/options/loader` : ''"
      class="flex min-w-0 items-center truncate text-sm font-semibold"
      :class="serverId ? 'hover:underline' : ''"
    >
      <div class="flex flex-row items-center gap-1">
        {{ game[0].toUpperCase() + game.slice(1) }}
        <span v-if="mcVersion">{{ mcVersion }}</span>
        <span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
      </div>
    </NuxtLink>
    <div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
      {{ game[0].toUpperCase() + game.slice(1) }}
      <span v-if="mcVersion">{{ mcVersion }}</span>
      <span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { GameIcon } from "@modrinth/assets";

defineProps<{
  game: string;
  mcVersion: string;
  isLink?: boolean;
}>();

const route = useNativeRoute();
const serverId = route.params.id as string;
</script>