40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { useVIntl, defineMessages } from '@vintl/vintl'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const { formatMessage } = useVIntl()
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
channel: 'release' | 'beta' | 'alpha'
|
||
|
|
large?: boolean
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
large: false,
|
||
|
|
},
|
||
|
|
)
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
releaseSymbol: {
|
||
|
|
id: 'project.versions.channel.release.symbol',
|
||
|
|
defaultMessage: 'R',
|
||
|
|
},
|
||
|
|
betaSymbol: {
|
||
|
|
id: 'project.versions.channel.beta.symbol',
|
||
|
|
defaultMessage: 'B',
|
||
|
|
},
|
||
|
|
alphaSymbol: {
|
||
|
|
id: 'project.versions.channel.alpha.symbol',
|
||
|
|
defaultMessage: 'A',
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
:class="`flex ${large ? 'text-lg w-[2.625rem] h-[2.625rem]' : 'text-sm w-9 h-9'} font-bold justify-center items-center rounded-full ${channel === 'release' ? 'bg-bg-green text-brand-green' : channel === 'beta' ? 'bg-bg-orange text-brand-orange' : 'bg-bg-red text-brand-red'}`"
|
||
|
|
>
|
||
|
|
{{ channel ? formatMessage(messages[`${channel}Symbol`]) : '?' }}
|
||
|
|
</div>
|
||
|
|
</template>
|