From d5117d9ee79f3c0b6b88df47bd85cb759445acf7 Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Sat, 28 May 2022 15:12:11 +0200
Subject: [PATCH] Fixed vue deprecation warnings for router-link

---
 src/components/TheSidebar.vue              |  1 -
 src/components/pages/Artist.vue            | 37 +++++++-------
 src/components/pages/Charts.vue            | 10 ++--
 src/components/pages/Favorites.vue         | 46 ++++++++++-------
 src/components/pages/Home.vue              | 40 ++++++++-------
 src/components/pages/LinkAnalyzer.vue      | 58 ++++++++++++----------
 src/components/pages/Tracklist.vue         | 10 ++--
 src/components/search/ResultsAlbums.vue    | 36 +++++++-------
 src/components/search/ResultsArtists.vue   | 22 ++++----
 src/components/search/ResultsPlaylists.vue | 22 ++++----
 src/components/search/ResultsTracks.vue    | 22 +++++---
 src/components/search/TopResult.vue        | 27 +++++-----
 12 files changed, 188 insertions(+), 143 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 281040d..e3bba0f 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -15,7 +15,6 @@
 			:class="{ 'bg-background-main': activeTablink === link.name }"
 			:to="{ name: link.routerName }"
 			class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
-			tag="a"
 			@click.native="activeTablink = link.name"
 		>
 			<i
diff --git a/src/components/pages/Artist.vue b/src/components/pages/Artist.vue
index 8f2f281..be6504b 100644
--- a/src/components/pages/Artist.vue
+++ b/src/components/pages/Artist.vue
@@ -49,27 +49,30 @@
 			<tbody>
 				<tr v-for="release in sortedData" :key="release.releaseID">
 					<router-link
-						tag="td"
+						custom
+						v-slot="{ navigate }"
 						class="flex items-center clickable"
 						:data-cm-link="release.releaseLink"
 						:to="{ name: 'Album', params: { id: release.releaseID } }"
 					>
-						<img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" />
-						<i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i>
-						<div>
-							<span class="flex hover:text-primary">
-								{{ release.releaseTitle }}
-								<i
-									v-if="checkNewRelease(release.releaseDate)"
-									class="material-icons title-icon title-icon--right title-icon--new"
-								>
-									fiber_new
-								</i>
-							</span>
-							<span v-show="currentTab === 'all'" class="block text-xs opacity-50 uppercase-first-letter">
-								{{ $tc(`globals.listTabs.${release.releaseType}`) }}
-							</span>
-						</div>
+						<td @click="navigate" @keypress.enter="navigate" role="link">
+							<img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" />
+							<i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i>
+							<div>
+								<span class="flex hover:text-primary">
+									{{ release.releaseTitle }}
+									<i
+										v-if="checkNewRelease(release.releaseDate)"
+										class="material-icons title-icon title-icon--right title-icon--new"
+									>
+										fiber_new
+									</i>
+								</span>
+								<span v-show="currentTab === 'all'" class="block text-xs opacity-50 uppercase-first-letter">
+									{{ $tc(`globals.listTabs.${release.releaseType}`) }}
+								</span>
+							</div>
+						</td>
 					</router-link>
 					<td class="w-32 text-center xl:w-40">{{ release.releaseDate }}</td>
 					<td class="w-20 text-center xl:w-32">{{ release.releaseTracksNumber }}</td>
diff --git a/src/components/pages/Charts.vue b/src/components/pages/Charts.vue
index 027baad..62ab262 100644
--- a/src/components/pages/Charts.vue
+++ b/src/components/pages/Charts.vue
@@ -51,16 +51,18 @@
 						<router-link
 							:to="{ name: 'Artist', params: { id: track.artist.id } }"
 							class="table__cell table__cell--medium table__cell--center clickable"
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 						>
-							{{ track.artist.name }}
+							<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
 						</router-link>
 						<router-link
 							:to="{ name: 'Album', params: { id: track.album.id } }"
 							class="table__cell--medium table__cell--center clickable"
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 						>
-							{{ track.album.title }}
+							<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
 						</router-link>
 						<td class="table__cell--small table__cell--center">
 							{{ convertDuration(track.duration) }}
diff --git a/src/components/pages/Favorites.vue b/src/components/pages/Favorites.vue
index c6ccec6..7b1cf09 100644
--- a/src/components/pages/Favorites.vue
+++ b/src/components/pages/Favorites.vue
@@ -29,9 +29,11 @@
 			</div>
 			<div v-if="(playlists.length + spotifyPlaylists.length) > 0" class="release-grid">
 				<div v-for="release in playlists" :key="release.id" class="release">
-					<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
-						<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
-						<p class="primary-text">{{ release.title }}</p>
+					<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" custom v-slot="{ navigate }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
+							<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
+							<p class="primary-text">{{ release.title }}</p>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">
@@ -45,9 +47,11 @@
 				</div>
 
 				<div v-for="release in spotifyPlaylists" :key="release.id" class="release">
-					<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
-						<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
-						<p class="primary-text">{{ release.title }}</p>
+					<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" custom v-slot="{ navigate }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
+							<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
+							<p class="primary-text">{{ release.title }}</p>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">
@@ -72,11 +76,14 @@
 					:key="release.id"
 					:to="{ name: 'Album', params: { id: release.id } }"
 					class="release clickable"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 				>
-					<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
-					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
+						<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
+						<p class="primary-text">{{ release.title }}</p>
+						<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
+					</div>
 				</router-link>
 			</div>
 		</div>
@@ -91,10 +98,13 @@
 					:key="release.id"
 					:to="{ name: 'Artist', params: { id: release.id } }"
 					class="release clickable"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 				>
-					<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
-					<p class="primary-text">{{ release.name }}</p>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
+						<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
+						<p class="primary-text">{{ release.name }}</p>
+					</div>
 				</router-link>
 			</div>
 		</div>
@@ -127,16 +137,18 @@
 					<router-link
 						:to="{ name: 'Artist', params: { id: track.artist.id } }"
 						class="table__cell table__cell--medium table__cell--center clickable"
-						tag="td"
+						custom
+						v-slot="{ navigate }"
 					>
-						{{ track.artist.name }}
+						<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
 					</router-link>
 					<router-link
 						:to="{ name: 'Album', params: { id: track.album.id } }"
 						class="table__cell--medium table__cell--center clickable"
-						tag="td"
+						custom
+						v-slot="{ navigate }"
 					>
-						{{ track.album.title }}
+						<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
 					</router-link>
 					<td class="table__cell--small">
 						{{ convertDuration(track.duration) }}
diff --git a/src/components/pages/Home.vue b/src/components/pages/Home.vue
index f2b530e..18770de 100644
--- a/src/components/pages/Home.vue
+++ b/src/components/pages/Home.vue
@@ -4,8 +4,8 @@
 
 		<section v-if="!isLoggedIn" ref="notLogged" class="py-6 border-0 border-t border-solid border-grayscale-500">
 			<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
-			<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
-				{{ $t('home.openSettings') }}
+			<router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
+				<button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('home.openSettings') }}</button>
 			</router-link>
 		</section>
 
@@ -15,22 +15,25 @@
 				<router-link
 					v-for="release in playlists"
 					:key="release.id"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 					class="release clickable"
 					:to="{ name: 'Playlist', params: { id: release.id } }"
 					tabindex="0"
 					@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
 				>
-					<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
-					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">
-						{{
-							`${$t('globals.by', { artist: release.user.name })} - ${$tc(
-								'globals.listTabs.trackN',
-								release.nb_tracks
-							)}`
-						}}
-					</p>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
+						<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
+						<p class="primary-text">{{ release.title }}</p>
+						<p class="secondary-text">
+							{{
+								`${$t('globals.by', { artist: release.user.name })} - ${$tc(
+									'globals.listTabs.trackN',
+									release.nb_tracks
+								)}`
+							}}
+						</p>
+					</div>
 				</router-link>
 			</div>
 		</section>
@@ -41,16 +44,19 @@
 				<router-link
 					v-for="release in albums"
 					:key="release.id"
-					tag="div"
+					custom
+					v-slot="{ navigate }"
 					class="release clickable"
 					:to="{ name: 'Album', params: { id: release.id } }"
 					:data-id="release.id"
 					tabindex="0"
 					@keyup.enter.native="$router.push({ name: 'Album', params: { id: release.id } })"
 				>
-					<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
-					<p class="primary-text">{{ release.title }}</p>
-					<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
+					<div @click="navigate" @keypress.enter="navigate" role="link">
+						<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
+						<p class="primary-text">{{ release.title }}</p>
+						<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
+					</div>
 				</router-link>
 			</div>
 		</section>
diff --git a/src/components/pages/LinkAnalyzer.vue b/src/components/pages/LinkAnalyzer.vue
index 1d1f62e..38cb2bd 100644
--- a/src/components/pages/LinkAnalyzer.vue
+++ b/src/components/pages/LinkAnalyzer.vue
@@ -27,37 +27,43 @@
 					<h1 class="m-0">{{ title }}</h1>
 					<h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
 						<i18n path="globals.by" tag="span">
-							<router-link
-								tag="span"
-								place="artist"
-								class="clickable"
-								:to="{ name: 'Artist', params: { id: data.artist.id } }"
-							>
-								{{ data.artist.name }}
-							</router-link>
+							<template #artist>
+								<router-link
+									custom
+									v-slot="{ navigate }"
+									class="clickable"
+									:to="{ name: 'Artist', params: { id: data.artist.id } }"
+								>
+									<span place="artist" @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
+								</router-link>
+							</template>
 						</i18n>
 						•
 						<i18n path="globals.in" tag="span">
-							<router-link
-								tag="span"
-								place="album"
-								class="clickable"
-								:to="{ name: 'Album', params: { id: data.album.id } }"
-							>
-								{{ data.album.title }}
-							</router-link>
+							<template #album>
+								<router-link
+									custom
+									v-slot="{ navigate }"
+									class="clickable"
+									:to="{ name: 'Album', params: { id: data.album.id } }"
+								>
+									<span @click="navigate" @keypress.enter="navigate" role="link">{{ data.album.title }}</span>
+								</router-link>
+							</template>
 						</i18n>
 					</h2>
 					<h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg">
 						<i18n path="globals.by" tag="span">
-							<router-link
-								tag="span"
-								place="artist"
-								class="clickable"
-								:to="{ name: 'Artist', params: { id: data.artist.id } }"
-							>
-								{{ data.artist.name }}
-							</router-link>
+							<template #artist>
+								<router-link
+									custom
+									v-slot="{ navigate }"
+									class="clickable"
+									:to="{ name: 'Artist', params: { id: data.artist.id } }"
+								>
+									<span @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
+								</router-link>
+							</template>
 						</i18n>
 						{{ ` • ${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
 					</h2>
@@ -137,8 +143,8 @@
 			</template>
 
 			<div v-if="type === 'album'">
-				<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
-					{{ $t('linkAnalyzer.table.tracklist') }}
+				<router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
+					<button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('linkAnalyzer.table.tracklist') }}</button>
 				</router-link>
 			</div>
 		</div>
diff --git a/src/components/pages/Tracklist.vue b/src/components/pages/Tracklist.vue
index 4719cb6..8893ebf 100644
--- a/src/components/pages/Tracklist.vue
+++ b/src/components/pages/Tracklist.vue
@@ -73,17 +73,19 @@
 							<router-link
 								:to="{ name: 'Artist', params: { id: track.artist.id } }"
 								class="table__cell--medium table__cell--center clickable"
-								tag="td"
+								custom
+								v-slot="{ navigate }"
 							>
-								{{ track.artist.name }}
+								<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
 							</router-link>
 							<router-link
 								v-if="type === 'playlist'"
 								:to="{ name: 'Album', params: { id: track.album.id } }"
 								class="table__cell--medium table__cell--center clickable"
-								tag="td"
+								custom
+								v-slot="{ navigate }"
 							>
-								{{ track.album.title }}
+								<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
 							</router-link>
 							<td
 								:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"
diff --git a/src/components/search/ResultsAlbums.vue b/src/components/search/ResultsAlbums.vue
index 37f1a96..98c4166 100644
--- a/src/components/search/ResultsAlbums.vue
+++ b/src/components/search/ResultsAlbums.vue
@@ -10,24 +10,26 @@
 
 			<div v-else class="release-grid">
 				<div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID" class="w-40 release">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
-						<CoverContainer
-							is-rounded
-							:cover="release.albumCoverMedium"
-							:link="release.albumLink"
-							@click.stop="$emit('add-to-queue', $event)"
-						/>
+					<router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
+							<CoverContainer
+								is-rounded
+								:cover="release.albumCoverMedium"
+								:link="release.albumLink"
+								@click.stop="$emit('add-to-queue', $event)"
+							/>
 
-						<span class="primary-text">
-							<i
-								v-if="release.isAlbumExplicit"
-								class="material-icons title-icon"
-								style="font-size: 1.0625rem !important"
-							>
-								explicit
-							</i>
-							{{ release.albumTitle }}
-						</span>
+							<span class="primary-text">
+								<i
+									v-if="release.isAlbumExplicit"
+									class="material-icons title-icon"
+									style="font-size: 1.0625rem !important"
+								>
+									explicit
+								</i>
+								{{ release.albumTitle }}
+							</span>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">
diff --git a/src/components/search/ResultsArtists.vue b/src/components/search/ResultsArtists.vue
index fc408ba..6f48b80 100644
--- a/src/components/search/ResultsArtists.vue
+++ b/src/components/search/ResultsArtists.vue
@@ -10,17 +10,19 @@
 
 			<div v-else class="release-grid">
 				<div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID" class="w-40 release">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
-						<CoverContainer
-							is-circle
-							:cover="release.artistPictureMedium"
-							:link="release.artistLink"
-							@click.stop="$emit('add-to-queue', $event)"
-						/>
+					<router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
+							<CoverContainer
+								is-circle
+								:cover="release.artistPictureMedium"
+								:link="release.artistLink"
+								@click.stop="$emit('add-to-queue', $event)"
+							/>
 
-						<span class="primary-text">
-							{{ release.artistName }}
-						</span>
+							<span class="primary-text">
+								{{ release.artistName }}
+							</span>
+						</div>
 					</router-link>
 
 					<!-- TODO Fix, depending on the tab there are albums number or fans number -->
diff --git a/src/components/search/ResultsPlaylists.vue b/src/components/search/ResultsPlaylists.vue
index d0ffa1c..2e45859 100644
--- a/src/components/search/ResultsPlaylists.vue
+++ b/src/components/search/ResultsPlaylists.vue
@@ -9,17 +9,19 @@
 			</div>
 			<div v-else class="release-grid">
 				<div v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID" class="w-40 release">
-					<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
-						<CoverContainer
-							is-rounded
-							:cover="playlist.playlistPictureMedium"
-							:link="playlist.playlistLink"
-							@click.stop="$emit('add-to-queue', $event)"
-						/>
+					<router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
+						<div @click="navigate" @keypress.enter="navigate" role="link">
+							<CoverContainer
+								is-rounded
+								:cover="playlist.playlistPictureMedium"
+								:link="playlist.playlistLink"
+								@click.stop="$emit('add-to-queue', $event)"
+							/>
 
-						<span class="primary-text">
-							{{ playlist.playlistTitle }}
-						</span>
+							<span class="primary-text">
+								{{ playlist.playlistTitle }}
+							</span>
+						</div>
 					</router-link>
 
 					<p class="secondary-text">
diff --git a/src/components/search/ResultsTracks.vue b/src/components/search/ResultsTracks.vue
index 7dbc620..807b7f1 100644
--- a/src/components/search/ResultsTracks.vue
+++ b/src/components/search/ResultsTracks.vue
@@ -43,23 +43,29 @@
 						</td>
 
 						<router-link
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 							class="break-words table__cell table__cell--medium table__cell--center"
 							:to="{ name: 'Artist', params: { id: track.artistID } }"
 						>
-							<span class="cursor-pointer hover:underline">
-								{{ track.artistName }}
-							</span>
+							<td @click="navigate" @keypress.enter="navigate" role="link">
+								<span class="cursor-pointer hover:underline">
+									{{ track.artistName }}
+								</span>
+							</td>
 						</router-link>
 
 						<router-link
-							tag="td"
+							custom
+							v-slot="{ navigate }"
 							class="break-words table__cell table__cell--medium table__cell--center"
 							:to="{ name: 'Album', params: { id: track.albumID } }"
 						>
-							<span class="cursor-pointer hover:underline">
-								{{ track.albumTitle }}
-							</span>
+							<td @click="navigate" @keypress.enter="navigate" role="link">
+								<span class="cursor-pointer hover:underline">
+									{{ track.albumTitle }}
+								</span>
+							</td>
 						</router-link>
 
 						<td class="table__cell table__cell--small table__cell--center">
diff --git a/src/components/search/TopResult.vue b/src/components/search/TopResult.vue
index 7b537ac..86a2069 100644
--- a/src/components/search/TopResult.vue
+++ b/src/components/search/TopResult.vue
@@ -1,22 +1,25 @@
 <template>
 	<div class="flex flex-col items-center justify-center">
 		<router-link
-			tag="div"
+			custom
+			v-slot="{ navigate }"
 			class="cursor-pointer"
 			:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
 		>
-			<CoverContainer
-				class="w-40 h-40"
-				:is-rounded="$attrs.info.type !== 'artist'"
-				:is-circle="$attrs.info.type === 'artist'"
-				:cover="$attrs.info.picture"
-				:link="$attrs.info.link"
-				@click.stop="$emit('add-to-queue', $event)"
-			/>
+			<div @click="navigate" @keypress.enter="navigate" role="link">
+				<CoverContainer
+					class="w-40 h-40"
+					:is-rounded="$attrs.info.type !== 'artist'"
+					:is-circle="$attrs.info.type === 'artist'"
+					:cover="$attrs.info.picture"
+					:link="$attrs.info.link"
+					@click.stop="$emit('add-to-queue', $event)"
+				/>
 
-			<p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
-				{{ $attrs.info.title }}
-			</p>
+				<p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
+					{{ $attrs.info.title }}
+				</p>
+			</div>
 		</router-link>
 
 		<p class="mb-3 text-center secondary-text">