fix empty content recent page

src/components/Main.vue

@@ -13,26 +13,14 @@
 			<EmptyContent
 				v-if="pageLoading"
 				icon="icon-loading" />
-			<template
-				v-if="tableData.length === 0 && !pageLoading">
-				<EmptyContent
-					v-show="$route.name==='FAVORITES'"
-					icon="icon-star">
-					No favorites yet
-					<template #desc>
-						Stations you mark as favorite will show up here
-					</template>
-				</EmptyContent>
 			<EmptyContent
 				v-if="tableData.length === 0 && !pageLoading"
-					v-show="$route.name==='SEARCH'"
-					icon="icon-search">
-					No search results
+				:icon="emptyContentIcon">
+				{{ emptyContentMessage }}
 				<template #desc>
-						No stations were found matching your search term
+					{{ emptyContentDesc }}
 				</template>
 			</EmptyContent>
-			</template>
 		</AppContent>
 		<Sidebar
 			:show-sidebar="showSidebar"
@@ -79,6 +67,36 @@ export default {
 		player() {
 			return this.$store.state.player
 		},
+		emptyContentMessage() {
+			if (this.$route.name === 'FAVORITES') {
+				return 'No favorites yet'
+			} else if (this.$route.name === 'RECENT') {
+				return 'No recent stations yet'
+			} else if (this.$route.name === 'SEARCH') {
+				return 'No search results'
+			}
+			return 'No stations here'
+		},
+		emptyContentIcon() {
+			if (this.$route.name === 'FAVORITES') {
+				return 'icon-star'
+			} else if (this.$route.name === 'RECENT') {
+				return 'icon-recent'
+			} else if (this.$route.name === 'SEARCH') {
+				return 'icon-search'
+			}
+			return 'icon-radio'
+		},
+		emptyContentDesc() {
+			if (this.$route.name === 'FAVORITES') {
+				return 'Stations you mark as favorite will show up here'
+			} else if (this.$route.name === 'RECENT') {
+				return 'Stations you recently played will show up here'
+			} else if (this.$route.name === 'SEARCH') {
+				return 'No stations were found matching your search term'
+			}
+			return 'No stations here'
+		},
 	},
 	watch: {
 		$route: 'onRoute',