update empty page

src/components/Pages/EmptyPage.vue

@@ -1,14 +1,96 @@
 <template>
-    <div>
-
+    <div class="flex flex-col items-center justify-center w-full min-h-full">
+        <component :is="icon" class="w-16 h-16 mb-3 fill-primary-300" />
+        <dt class="text-lg font-medium text-center text-gray-800">
+            {{ title }}
+        </dt>
+        <dd class="text-sm text-center text-gray-800">
+            {{ desc }}
+        </dd>
     </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { computed } from 'vue'
+import {
+    IconFilter,
+    IconFileX,
+    IconNetworkDisconnected,
+    IconNetworkChange,
+    IconLinkBreak,
+    IconLockKey,
+    IconDatabase,
+    IconSmileySad
+} from '@/utils/icons'
+
+const props = defineProps({
     type: {
         type: String as () => "no_filter" | "not_found" | "disconnect" | "connection_change" | "error_404" | "error_403" | "error_500",
-        default: 'not_found',
+        default: 'error_404',
+        required: true
+    }
+})
+
+const title = computed(() => {
+    switch (props.type) {
+        case 'no_filter':
+            return 'Pilih Filter'
+        case 'not_found':
+            return 'Tidak ditemukan'
+        case 'disconnect':
+            return 'Koneksi Terputus'
+        case 'connection_change':
+            return 'Perubahan Koneksi'
+        case 'error_404':
+            return 'Error 404'
+        case 'error_403':
+            return 'Error 403'
+        case 'error_500':
+            return 'Error 500'
+        default:
+            return 'Tidak ditemukan'
+    }
+})
+
+const desc = computed(() => {
+    switch (props.type) {
+        case 'no_filter':
+            return 'Silahkan terapkan filter di atas untuk mulai menampilkan data'
+        case 'not_found':
+            return 'Data yang kamu cari tidak ditemukan'
+        case 'disconnect':
+            return 'Harap hubungkan perangkat ke jaringan internet'
+        case 'connection_change':
+            return 'Terjadinya perubahan koneksi, harap muat ulang halaman'
+        case 'error_404':
+            return 'Halaman yang kamu tuju tidak ditemukan'
+        case 'error_403':
+            return 'Kamu tidak punya akses ke halaman ini'
+        case 'error_500':
+            return 'Terjadi kesalahan, silahkan coba beberapa saat lagi'
+        default:
+            return 'Terjadi kesalahan, silahkan coba beberapa saat lagi'
+    }
+})
+
+const icon = computed(() => {
+    switch (props.type) {
+        case 'no_filter':
+            return IconFilter
+        case 'not_found':
+            return IconFileX
+        case 'disconnect':
+            return IconNetworkDisconnected
+        case 'connection_change':
+            return IconNetworkChange
+        case 'error_404':
+            return IconLinkBreak
+        case 'error_403':
+            return IconLockKey
+        case 'error_500':
+            return IconDatabase
+        default:
+            return IconSmileySad
     }
 })
 </script>