mirror of
https://github.com/modrinth/code.git
synced 2026-08-30 11:36:05 +00:00
Prospector
b68a199814
* add account switcher, migrate context menus to overflow menu system, update version filter controls, only pad instance icons * app account switcher, improve some context menus, theme stuff * prepr * handle reauthentication * fix a couple sign in issues, admin page cleanup, fix org status badges, fix official account badge, open in local keybind, publish plus icons * rename generic menus to ButtonMenu (& types) * fix hydration issue w/ dropdowns + middleware error
68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
|
|
import { Avatar, ButtonLink, defineMessages, FormattedTag, useVIntl } from '@modrinth/ui'
|
|
import { computed } from 'vue'
|
|
|
|
import { getInstanceIconUrl } from '@/helpers/instance'
|
|
|
|
const { formatMessage } = useVIntl()
|
|
const messages = defineMessages({
|
|
backToInstance: {
|
|
id: 'app.instance.navigation.back-to-instance',
|
|
defaultMessage: 'Back to instance',
|
|
},
|
|
})
|
|
|
|
type Instance = {
|
|
game_version: string
|
|
loader: string
|
|
path: string
|
|
install_stage: string
|
|
icon_path?: string
|
|
name: string
|
|
}
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
instance: Instance
|
|
backTab?: string
|
|
}>(),
|
|
{ backTab: undefined },
|
|
)
|
|
|
|
const instanceLink = computed(() => {
|
|
const base = `/instance/${encodeURIComponent(props.instance.id)}`
|
|
return props.backTab ? `${base}/${props.backTab}` : base
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
|
|
<router-link :to="instanceLink" tabindex="-1" class="flex flex-col gap-4 text-primary">
|
|
<span class="flex items-center gap-2">
|
|
<Avatar
|
|
:src="getInstanceIconUrl(instance.icon_path)"
|
|
:alt="instance.name"
|
|
size="48px"
|
|
pad-transparent-corners
|
|
/>
|
|
<span class="flex flex-col gap-2">
|
|
<span class="font-extrabold bold text-contrast">
|
|
{{ instance.name }}
|
|
</span>
|
|
<span class="text-secondary flex items-center gap-2 font-semibold">
|
|
<GameIcon class="h-5 w-5 text-secondary" />
|
|
<FormattedTag :tag="instance.loader" enforce-type="loader" />
|
|
{{ instance.game_version }}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</router-link>
|
|
<ButtonLink :to="instanceLink">
|
|
<LeftArrowIcon /> {{ formatMessage(messages.backToInstance) }}
|
|
</ButtonLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|