fix: all empty states now come from a common component

frontend/src/pages/Batches.vue

@@ -70,22 +70,8 @@
 				<BatchCard :batch="batch" />
 			</router-link>
 		</div>
-		<div
-			v-else-if="!batches.list.loading"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 mt-48"
-		>
-			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
-			<div class="text-lg font-medium mb-1">
-				{{ __('No batches found') }}
-			</div>
-			<div class="leading-5 w-2/5 text-center">
-				{{
-					__(
-						'There are no batches matching the criteria. Keep an eye out, fresh learning experiences are on the way soon!'
-					)
-				}}
-			</div>
-		</div>
+		<EmptyState v-else-if="!batches.list.loading" type="Batches" />
+
 		<div
 			v-if="!batches.list.loading && batches.hasNextPage"
 			class="flex justify-center mt-5"
@@ -110,6 +96,7 @@ import { computed, inject, onMounted, ref, watch } from 'vue'
 import { BookOpen, Plus } from 'lucide-vue-next'
 import { sessionStore } from '@/stores/session'
 import BatchCard from '@/components/BatchCard.vue'
+import EmptyState from '@/components/EmptyState.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')