Favori.vue

<template>
	<button
		id="favori"
		class="btn btn-secondary"
		v-tooltip-click="
			$favourites.list.includes(uid)
				? $t('favoris.enregistre')
				: $t('favoris.supprime')
		"
		@click="$favourites.toggleFavourite(uid, $event)">
		<span class="visually-hidden">{{
			$favourites.list.includes(uid)
				? $t("favoris.supprimer")
				: $t("favoris.ajouter")
		}}</span>
		<solid-user-add-icon
			aria-hidden="true"
			style="width: 2rem"
			v-if="!$favourites.list.includes(uid)" />
		<solid-user-remove-icon
			aria-hidden="true"
			style="width: 2rem"
			v-if="$favourites.list.includes(uid)" />
	</button>
</template>

<script>
export default {
	props: {
		uid: {
			type: String,
			required: true
		}
	}
}
</script>

<style lang="scss">
#favori {
	width: 50px;
	height: 50px;
	margin-bottom: 1rem;

	@media (min-width: 576px) {
		margin-bottom: 0;
	}
}
</style>