modrinth/apps/app-frontend/src/components/ui/InstanceIndicator.vue

<script setup lang="ts">
import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui'
import { convertFileSrc } from '@tauri-apps/api/core'
import { computed } from 'vue'

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="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
					:alt="instance.name"
					size="48px"
				/>
				<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 /> Back to instance </ButtonLink>
	</div>
</template>

<style scoped lang="scss"></style>