Files
AstralRinth/packages/ui/src/components/version/VersionChannelIndicator.vue
Prospector 2dd8d5a119 Sidebar refinements (#2306)
* Begin sidebar refinement, change back to left as default

* New filters proof of concept

* Hide if only one option

* Version filters

* Update changelog page

* Use new cosmetic variable for sidebar position

* Fix safari issue and change defaults to left filters, right sidebars

* Fix download modal on safari and firefox

* Add date published tooltip to versions page

* Improve selection consistency

* Fix lint and extract i18n

* Remove unnecessary observer options
2024-08-26 16:53:27 -07:00

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>