From 52e546ed645c14fd76e66ec3b050054c3d329375 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 2 Jun 2022 09:03:21 +0200
Subject: [PATCH] #150 - added empty state for key page

---
 resources/js/Pages/Keys.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/resources/js/Pages/Keys.vue b/resources/js/Pages/Keys.vue
index 5c158fa..83a8bac 100644
--- a/resources/js/Pages/Keys.vue
+++ b/resources/js/Pages/Keys.vue
@@ -156,7 +156,17 @@
                 colspan="100%"
                 class="py-4 text-xl leading-5 text-center text-gray-700"
               >
-                Brak danych
+                <EmptyState class="text-gray-700">
+                  <template #head>
+                    <KeyIcon class="mx-auto w-12 h-12" />
+                  </template>
+                  <template #title>
+                    Brak kluczy
+                  </template>
+                  <template #text>
+                    Nie dodano ani jednego klucza
+                  </template>
+                </EmptyState>
               </td>
             </tr>
           </tbody>
@@ -307,7 +317,7 @@
 </template>
 
 <script setup>
-import { DotsVerticalIcon, TrashIcon, CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
+import { DotsVerticalIcon, TrashIcon, CheckIcon, SelectorIcon, KeyIcon } from '@heroicons/vue/solid'
 import DominoMaskIcon from 'vue-material-design-icons/DominoMask.vue'
 import HandshakeIcon from 'vue-material-design-icons/Handshake.vue'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
@@ -315,6 +325,7 @@ import { computed, ref } from 'vue'
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'
 import { useForm } from '@inertiajs/inertia-vue3'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 const props = defineProps({
   keys: Object,