<script lang="ts" setup>
const { name, align, type } = defineProps<{
name: string
align: 'left' | 'right'
type: 'minecraft' | 'discord'
}>()
const { t } = useI18n()
const value = ref(0)
</script>
<template>
<div class="status-top">
<div
:class="[
'status-container',
align === 'right' ? 'items-end text-right' : 'items-start text-left',
]"
>
<a
id="server-glow"
:class="{
'self-start': align === 'left',
'self-end': align === 'right',
}"
class="online-count text-xs"
>
{{ value }}
{{
type === 'minecraft'
? t('header_stats.stats.players')
: t('header_stats.stats.online')
}}
</a>
<div
:class="{
'text-left': align === 'left',
'text-right': align === 'right',
}"
class="flex flex-col"
>
<p class="minecrafter text-3xl">{{ name }}</p>
<a class="copy-text">{{ t('header_stats.actions.copy') }}</a>
</div>
</div>
</div>
</template>
<style scoped>
.status-top {
@apply hidden md:flex items-center gap-2;
}
.status-container {
@apply flex flex-col;
}
.copy-text {
@apply cursor-pointer text-[0.7rem] text-white hover:text-gray-300;
}
.online-count {
padding: 4px;
border-radius: 5px;
background-color: var(--color-lighter-primary);
color: var(--color-text-darker);
}
</style>
<script lang="ts" setup>
const { name, align, type } = defineProps<{
name: string
align: 'left' | 'right'
type: 'minecraft' | 'discord'
}>()
const { t } = useI18n()
const value = ref(0)
</script>
<template>
<div class="status-top">
<div
:class="[
'status-container',
align === 'right' ? 'items-end text-right' : 'items-start text-left',
]"
>
<a
id="server-glow"
:class="{
'self-start': align === 'left',
'self-end': align === 'right',
}"
class="online-count text-xs"
>
{{ value }}
{{
type === 'minecraft'
? t('header_stats.stats.players')
: t('header_stats.stats.online')
}}
</a>
<div
:class="{
'text-left': align === 'left',
'text-right': align === 'right',
}"
class="flex flex-col"
>
<p class="minecrafter text-3xl">{{ name }}</p>
<a class="copy-text">{{ t('header_stats.actions.copy') }}</a>
</div>
</div>
</div>
</template>
<style scoped>
.status-top {
@apply hidden md:flex items-center gap-2;
}
.status-container {
@apply flex flex-col;
}
.copy-text {
@apply cursor-pointer text-[0.7rem] text-white hover:text-gray-300;
}
.online-count {
padding: 4px;
border-radius: 5px;
background-color: var(--color-lighter-primary);
color: var(--color-text-darker);
}
</style>