- add empty states

resources/js/Share/CategoriesList.vue

@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     categories: {
         type: Array,
@@ -16,7 +18,7 @@ defineProps({
                 href="/dashboard/category/create"
                 class="bg-blue-400 hover:bg-blue-500 text-white px-2.5 py-1 rounded-full"><FontAwesomeIcon :icon="['fas', 'plus']" /></InertiaLink>
         </header>
-        <ul class="flex flex-col gap-2">
+        <ul v-if="categories.length" class="flex flex-col gap-2">
             <li
                 v-for="(category, key) in categories"
                 :key="key"
@@ -38,5 +40,9 @@ defineProps({
                 </div>
             </li>
         </ul>
+        <EmptyState v-else :icon="['fas', 'list']">
+            <template #title>Brak kategorii</template>
+            <template #text>Nie dodano jeszcze żadnej kategorii.</template>
+        </EmptyState>
     </section>
 </template>

resources/js/Share/Components/EmptyState.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+    icon: {
+        type: String,
+        defaut: ['far', 'folder-open'],
+    },
+    showDescription: {
+        type: Boolean,
+        default: true,
+    },
+});
+</script>
+
+<template>
+    <div class="text-center my-5 text-gray-500">
+        <slot name="head">
+            <FontAwesomeIcon :icon="icon" class="mx-auto w-12 h-12" />
+        </slot>
+        <h3 class="mt-2 text-sm font-medium">
+            <slot name="title">Brak danych</slot>
+        </h3>
+        <p
+            v-if="showDescription"
+            class="text-sm"
+        >
+            <slot name="text">
+                Nie znaleziono danych.
+            </slot>
+        </p>
+    </div>
+</template>

resources/js/Share/ProjectsList.vue

@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     projects: {
         type: Array,
@@ -38,8 +40,9 @@ defineProps({
                 </div>
             </li>
         </ul>
-        <div v-else>
-            Empty
-        </div>
+        <EmptyState v-else :icon="['fas', 'bars-progress']">
+            <template #title>Brak projektów</template>
+            <template #text>Nie dodano jeszcze żadnego projektu.</template>
+        </EmptyState>
     </section>
 </template>