1
0
Files
AstralRinth/packages/ui/src/components/version/VersionChannelIndicator.vue
Prospector 1bbb01bd42 devex: migrate to vue-i18n (#4966)
* sample languages refactor

* feat: consistency + dedupe impl of i18n

* fix: broken imports

* fix: intl formatted component

* fix: use relative imports

* fix: imports

* fix: comment out incomplete locales + fix imports

* feat: cleanup

* fix: ui imports

* fix: lint

* fix: admonition import

* make footer a component, fix language reactivity

* make copyright notice untranslatable

---------

Co-authored-by: Calum H. <contact@cal.engineer>
2025-12-27 21:37:37 +00:00

41 lines
998 B
Vue

<script setup lang="ts">
import type { VersionChannel } from '@modrinth/utils'
import { defineMessages, useVIntl } from '../../composables/i18n'
const { formatMessage } = useVIntl()
withDefaults(
defineProps<{
channel: VersionChannel
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>