fix: all empty states now come from a common component

frontend/src/components/Controls/MultiSelect.vue

@@ -55,7 +55,10 @@
 											</div>
 										</li>
 									</ComboboxOption>
-									<div v-if="attrs.onCreate" class="absolute bottom-2 left-1 w-[98%] pt-2 bg-white border-t">
+									<div
+										v-if="attrs.onCreate"
+										class="absolute bottom-2 left-1 w-[98%] pt-2 bg-white border-t"
+									>
 										<Button
 											variant="ghost"
 											class="w-full !justify-start"
@@ -75,13 +78,18 @@
 			</Combobox>
 		</div>
 		<div v-if="values.length" class="grid grid-cols-2 gap-2 mt-4">
-			<div v-for="value in values" class="flex items-center justify-between break-all bg-surface-gray-2 text-ink-gray-7 word-wrap p-2 rounded-md mr-2">
+			<div
+				v-for="value in values"
+				class="flex items-center justify-between break-all bg-surface-gray-2 text-ink-gray-7 word-wrap p-2 rounded-md mr-2"
+			>
 				<span class="break-all">
 					{{ value }}
 				</span>
-				<X class="size-4 stroke-1.5 cursor-pointer" @click="removeValue(value)" />
+				<X
+					class="size-4 stroke-1.5 cursor-pointer"
+					@click="removeValue(value)"
+				/>
 			</div>
-			
 		</div>
 		<!-- <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" /> -->
 	</div>

frontend/src/components/EmptyState.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="flex flex-col items-center justify-center mt-60">
+		<GraduationCap class="size-10 mx-auto stroke-1 text-ink-gray-5" />
+		<div class="text-lg font-semibold text-ink-gray-7 mb-2.5">
+			{{ __('No {0}').format(type?.toLowerCase()) }}
+		</div>
+		<div
+			class="leading-5 text-base w-2/5 text-base text-center text-ink-gray-7"
+		>
+			{{
+				__(
+					'There are no {0} currently. Keep an eye out, fresh learning experiences are on the way!'
+				).format(type?.toLowerCase())
+			}}
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { BookOpen, GraduationCap } from 'lucide-vue-next'
+
+const props = defineProps({
+	type: String,
+})
+</script>