- add empty states

resources/js/Pages/Messages/Index.vue

@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     messages: {
         type: Object,
@@ -10,8 +12,15 @@ defineProps({
 <template>
     <InertiaHead title="Wiadomości" />
     <div class="p-4">
-        <header class="pb-4">
-            <h1 class="text-3xl font-roboto font-light">Wiadomości</h1>
+        <header class="flex justify-between items-center pb-4">
+            <div class="flex items-center gap-2">
+                <InertiaLink
+                    as="button"
+                    href="/dashboard"
+                    class="px-2 text-xl text-gray-700 hover:text-black"
+                    title="Wróc do dashboard"><FontAwesomeIcon :icon="['fas', 'caret-left']" /></InertiaLink>
+                <h1 class="text-3xl font-roboto font-light">Wiadomości</h1>
+            </div>
         </header>
         <div class="overflow-x-auto">
             <table v-if="messages.data.length" class="table-fixed w-full min-w-[600px] border-separate border-spacing-y-2 cursor-pointer">
@@ -47,9 +56,10 @@ defineProps({
                     </InertiaLink>
                 </tbody>
             </table>
-            <div v-else>
-                Lista pusta!
-            </div>
+            <EmptyState v-else :icon="['fas', 'message']">
+                <template #title>Brak wiadomości</template>
+                <template #text>Nie przesłano jeszcze żadnej wiadomości.</template>
+            </EmptyState>
         </div>
     </div>
 </template>