Rocketmc/packages/ui/src/components/project/ProjectSidebarLinks.vue

<template>
	<div
		v-if="
			project.issues_url ||
			project.source_url ||
			project.wiki_url ||
			project.discord_url ||
			project.donation_urls.length > 0
		"
		class="flex flex-col gap-3"
	>
		<h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
		<div
			class="flex flex-col gap-3 font-semibold [&>a]:flex [&>a]:gap-2 [&>a]:items-center [&>a]:w-fit [&>a]:text-primary [&>a]:leading-[1.2] [&>a:hover]:underline"
		>
			<a
				v-if="project.issues_url"
				:href="project.issues_url"
				:target="linkTarget"
				rel="noopener nofollow ugc"
			>
				<IssuesIcon aria-hidden="true" />
				{{ formatMessage(messages.issues) }}
				<ExternalIcon aria-hidden="true" class="external-icon" />
			</a>
			<a
				v-if="project.source_url"
				:href="project.source_url"
				:target="linkTarget"
				rel="noopener nofollow ugc"
			>
				<CodeIcon aria-hidden="true" />
				{{ formatMessage(messages.source) }}
				<ExternalIcon aria-hidden="true" class="external-icon" />
			</a>
			<a
				v-if="project.wiki_url"
				:href="project.wiki_url"
				:target="linkTarget"
				rel="noopener nofollow ugc"
			>
				<WikiIcon aria-hidden="true" />
				{{ formatMessage(messages.wiki) }}
				<ExternalIcon aria-hidden="true" class="external-icon" />
			</a>
			<a
				v-if="project.discord_url"
				:href="project.discord_url"
				:target="linkTarget"
				rel="noopener nofollow ugc"
			>
				<DiscordIcon class="shrink" aria-hidden="true" />
				{{ formatMessage(messages.discord) }}
				<ExternalIcon aria-hidden="true" class="external-icon" />
			</a>
			<hr
				v-if="
					(project.issues_url || project.source_url || project.wiki_url || project.discord_url) &&
					project.donation_urls.length > 0
				"
				class="w-full border-button-border my-0.5"
			/>
			<a
				v-for="(donation, index) in project.donation_urls"
				:key="index"
				:href="donation.url"
				:target="linkTarget"
				rel="noopener nofollow ugc"
			>
				<BuyMeACoffeeIcon v-if="donation.id === 'bmac'" aria-hidden="true" />
				<PatreonIcon v-else-if="donation.id === 'patreon'" aria-hidden="true" />
				<KoFiIcon v-else-if="donation.id === 'ko-fi'" aria-hidden="true" />
				<PayPalIcon v-else-if="donation.id === 'paypal'" aria-hidden="true" />
				<OpenCollectiveIcon v-else-if="donation.id === 'open-collective'" aria-hidden="true" />
				<HeartIcon v-else-if="donation.id === 'github'" />
				<CurrencyIcon v-else />
				<span v-if="donation.id === 'bmac'">{{ formatMessage(messages.donateBmac) }}</span>
				<span v-else-if="donation.id === 'patreon'">{{
					formatMessage(messages.donatePatreon)
				}}</span>
				<span v-else-if="donation.id === 'paypal'">{{ formatMessage(messages.donatePayPal) }}</span>
				<span v-else-if="donation.id === 'ko-fi'">{{ formatMessage(messages.donateKoFi) }}</span>
				<span v-else-if="donation.id === 'github'">{{ formatMessage(messages.donateGithub) }}</span>
				<span v-else>{{ formatMessage(messages.donateGeneric) }}</span>
				<ExternalIcon aria-hidden="true" class="external-icon" />
			</a>
		</div>
	</div>
</template>
<script setup lang="ts">
import {
	BuyMeACoffeeIcon,
	CodeIcon,
	CurrencyIcon,
	DiscordIcon,
	ExternalIcon,
	HeartIcon,
	IssuesIcon,
	KoFiIcon,
	OpenCollectiveIcon,
	PatreonIcon,
	PayPalIcon,
	WikiIcon,
} from '@modrinth/assets'
import { defineMessages, useVIntl } from '@vintl/vintl'

const { formatMessage } = useVIntl()

defineProps<{
	project: {
		issues_url: string
		source_url: string
		wiki_url: string
		discord_url: string
		donation_urls: {
			id: string
			url: string
		}[]
	}
	linkTarget: string
}>()

const messages = defineMessages({
	title: {
		id: 'project.about.links.title',
		defaultMessage: 'Links',
	},
	issues: {
		id: 'project.about.links.issues',
		defaultMessage: 'Report issues',
	},
	source: {
		id: 'project.about.links.source',
		defaultMessage: 'View source',
	},
	wiki: {
		id: 'project.about.links.wiki',
		defaultMessage: 'Visit wiki',
	},
	discord: {
		id: 'project.about.links.discord',
		defaultMessage: 'Join Discord server',
	},
	donateGeneric: {
		id: 'project.about.links.donate.generic',
		defaultMessage: 'Donate',
	},
	donateGitHub: {
		id: 'project.about.links.donate.github',
		defaultMessage: 'Sponsor on GitHub',
	},
	donateBmac: {
		id: 'project.about.links.donate.bmac',
		defaultMessage: 'Buy Me a Coffee',
	},
	donatePatreon: {
		id: 'project.about.links.donate.patreon',
		defaultMessage: 'Donate on Patreon',
	},
	donatePayPal: {
		id: 'project.about.links.donate.paypal',
		defaultMessage: 'Donate on PayPal',
	},
	donateKoFi: {
		id: 'project.about.links.donate.kofi',
		defaultMessage: 'Donate on Ko-fi',
	},
	donateGithub: {
		id: 'project.about.links.donate.github',
		defaultMessage: 'Sponsor on GitHub',
	},
})
</script>