resources/js/Shared/Widgets/UserVacationRequests.vue

@@ -38,12 +38,25 @@
           </li>
           <li v-if="! requests.length">
             <p class="py-2">
-              Brak danych
+              <EmptyState class="text-gray-700">
+                <template #head>
+                  <CollectionIcon class="mx-auto w-12 h-12" />
+                </template>
+                <template #title>
+                  Brak wniosków
+                </template>
+                <template #text>
+                  Nie ma oczekujących wniosków
+                </template>
+              </EmptyState>
             </p>
           </li>
         </ul>
       </div>
-      <div class="mt-6">
+      <div
+        v-if="requests.length"
+        class="mt-6"
+      >
         <InertiaLink
           href="/vacation/requests/me"
           class="flex justify-center items-center py-2 px-4 w-full text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blumilk-500 shadow-sm"
@@ -58,6 +71,8 @@
 <script setup>
 import Status from '@/Shared/Status'
 import VacationType from '@/Shared/VacationType'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import { CollectionIcon } from '@heroicons/vue/solid'
 
 defineProps({
   requests: Object,