mirror of
https://github.com/modrinth/code.git
synced 2026-08-27 10:04:52 +00:00
Cal H.
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 cb99d2376c.
* 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>
|