AstralRinth/packages/ui/src/components/version/VersionSummary.vue

<template>
	<div
		class="grid grid-cols-[min-content_auto_min-content_min-content] items-center gap-2 rounded-2xl border-[1px] border-divider bg-bg p-2"
	>
		<VersionChannelIndicator :channel="version.version_type" />
		<div class="flex min-w-0 flex-col gap-1">
			<h1 class="my-0 truncate text-nowrap text-base font-extrabold leading-none text-contrast">
				{{ version.version_number }}
			</h1>
			<p class="m-0 truncate text-nowrap text-xs font-semibold text-secondary">
				{{ version.name }}
			</p>
		</div>
		<ButtonStyled color="brand">
			<a :href="downloadUrl" class="min-w-0" @click="emit('onDownload')">
				<DownloadIcon aria-hidden="true" /> Download
			</a>
		</ButtonStyled>
		<ButtonStyled circular>
			<nuxt-link
				:to="`/project/${props.version.project_id}/version/${props.version.id}`"
				class="min-w-0"
				aria-label="Open project page"
				@click="emit('onNavigate')"
			>
				<ExternalIcon aria-hidden="true" />
			</nuxt-link>
		</ButtonStyled>
	</div>
</template>

<script setup lang="ts">
import { DownloadIcon, ExternalIcon } from '@modrinth/assets'
import type { Version, VersionFile } from '@modrinth/utils'
import { computed } from 'vue'

import { ButtonStyled, VersionChannelIndicator } from '../index'

const props = defineProps<{
	version: Version
}>()

const downloadUrl = computed(() => {
	const primary: VersionFile = props.version.files.find((x) => x.primary) || props.version.files[0]
	return primary.url
})

const emit = defineEmits(['onDownload', 'onNavigate'])
</script>