You've already forked AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
:aria-label="`Server is ${getStatusText(state)}`"
|
|
class="relative inline-flex select-none items-center"
|
|
@mouseenter="isExpanded = true"
|
|
@mouseleave="isExpanded = false"
|
|
>
|
|
<div
|
|
:class="[
|
|
'h-4 w-4 rounded-full transition-all duration-300 ease-in-out',
|
|
getStatusClass(state).main,
|
|
]"
|
|
>
|
|
<div
|
|
:class="[
|
|
'absolute inline-flex h-4 w-4 animate-ping rounded-full',
|
|
getStatusClass(state).bg,
|
|
]"
|
|
></div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'absolute -left-4 flex w-auto items-center gap-2 rounded-full px-2 py-1 transition-all duration-150 ease-in-out',
|
|
getStatusClass(state).bg,
|
|
isExpanded ? 'translate-x-2 scale-100 opacity-100' : 'translate-x-0 scale-90 opacity-0',
|
|
]"
|
|
>
|
|
<div class="h-3 w-3 rounded-full"></div>
|
|
<span
|
|
:class="[
|
|
'origin-left whitespace-nowrap text-sm font-semibold text-contrast transition-all duration-[200ms] ease-in-out',
|
|
isExpanded ? 'translate-x-0 scale-100' : '-translate-x-1 scale-x-75',
|
|
]"
|
|
>
|
|
{{ getStatusText(state) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ServerState } from '@modrinth/utils'
|
|
import { ref } from 'vue'
|
|
|
|
const STATUS_CLASSES = {
|
|
running: { main: 'bg-brand', bg: 'bg-bg-green' },
|
|
stopped: { main: '', bg: '' },
|
|
crashed: { main: 'bg-brand-red', bg: 'bg-bg-red' },
|
|
unknown: { main: '', bg: '' },
|
|
} as const
|
|
|
|
const STATUS_TEXTS: Partial<Record<ServerState, string>> = {
|
|
running: 'Running',
|
|
stopped: '',
|
|
crashed: 'Crashed',
|
|
unknown: 'Unknown',
|
|
} as const
|
|
|
|
defineProps<{
|
|
state: ServerState
|
|
}>()
|
|
|
|
const isExpanded = ref(false)
|
|
|
|
function getStatusClass(state: ServerState) {
|
|
if (state in STATUS_CLASSES) {
|
|
return STATUS_CLASSES[state as keyof typeof STATUS_CLASSES]
|
|
}
|
|
return STATUS_CLASSES.unknown
|
|
}
|
|
|
|
function getStatusText(state: ServerState) {
|
|
return STATUS_TEXTS[state] ?? STATUS_TEXTS.unknown
|
|
}
|
|
</script>
|