forked from didirus/AstralRinth
b54fcaa0b1
* feat: make hosting marketing page translatable, part 1 * format what we've got so far * lint and fix locale setting * the rest of the owl, almost still one more message in MedalPlanPromotion that's a bit annoying because of all the inline styles * finishing touches some things just shouldn't be questioned, i guess. that's two for two on issues that occur even though i seem to have done everything right. i give up * whoops, that's literal * get back in the span, you * fix typo + lint * and now it works * one more fix
85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { CpuIcon, DatabaseIcon, MemoryStickIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
|
|
import { computed } from 'vue'
|
|
|
|
import { defineMessages, useVIntl } from '../../composables/i18n'
|
|
import AutoLink from '../base/AutoLink.vue'
|
|
|
|
const { formatMessage } = useVIntl()
|
|
|
|
const messages = defineMessages({
|
|
gbRam: {
|
|
id: 'hosting.specs.gb-ram',
|
|
defaultMessage: '{ram} GB RAM',
|
|
},
|
|
gbStorage: {
|
|
id: 'hosting.specs.gb-storage',
|
|
defaultMessage: '{storage} GB Storage',
|
|
},
|
|
sharedCpus: {
|
|
id: 'hosting.specs.shared-cpus',
|
|
defaultMessage: '{cpus} Shared CPUs',
|
|
},
|
|
burst: {
|
|
id: 'hosting.specs.burst',
|
|
defaultMessage: 'Bursts up to {cpus} CPUs',
|
|
},
|
|
burstTooltip: {
|
|
id: 'hosting.specs.burst.tooltip',
|
|
defaultMessage:
|
|
'CPU bursting allows your server to temporarily use additional threads to help mitigate TPS spikes. Click for more info.',
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'click-bursting-link'): void
|
|
}>()
|
|
|
|
const props = defineProps<{
|
|
ram: number
|
|
storage: number
|
|
cpus: number
|
|
}>()
|
|
|
|
const formattedRam = computed(() => {
|
|
return props.ram / 1024
|
|
})
|
|
|
|
const formattedStorage = computed(() => {
|
|
return props.storage / 1024
|
|
})
|
|
|
|
const sharedCpus = computed(() => {
|
|
return props.cpus / 2
|
|
})
|
|
</script>
|
|
<template>
|
|
<ul class="m-0 flex list-none flex-col gap-2 px-0 text-sm leading-normal text-secondary">
|
|
<li class="flex items-center gap-2">
|
|
<MemoryStickIcon class="h-5 w-5 shrink-0" />
|
|
{{ formatMessage(messages.gbRam, { ram: formattedRam }) }}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<DatabaseIcon class="h-5 w-5 shrink-0" />
|
|
{{ formatMessage(messages.gbStorage, { storage: formattedStorage }) }}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<CpuIcon class="h-5 w-5 shrink-0" />
|
|
{{ formatMessage(messages.sharedCpus, { cpus: sharedCpus }) }}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<SparklesIcon class="h-5 w-5 shrink-0" />
|
|
{{ formatMessage(messages.burst, { cpus: props.cpus }) }}
|
|
<AutoLink
|
|
v-tooltip="formatMessage(messages.burstTooltip)"
|
|
class="flex"
|
|
to="https://modrinth.com/hosting#cpu-burst"
|
|
target="_blank"
|
|
@click="() => emit('click-bursting-link')"
|
|
>
|
|
<UnknownIcon class="h-4 w-4 text-secondary opacity-80" />
|
|
</AutoLink>
|
|
</li>
|
|
</ul>
|
|
</template>
|