- add empty states

resources/js/Pages/CV/Index.vue

@@ -1,4 +1,6 @@
 <script setup>
+import EmptyState from '@/Share/Components/EmptyState.vue';
+
 defineProps({
     cvs: {
         type: Object,
@@ -82,9 +84,10 @@ function copySlug(slug) {
                     </InertiaLink>
                 </tbody>
             </table>
-            <div v-else>
+            <EmptyState v-else :icon="['fas', 'file']">
-                Pusta lista
+                <template #title>Nie znaleziono</template>
-            </div>
+                <template #text>Nie dodano jeszcze CV do listy.</template>
+            </EmptyState>
         </div>
     </div>
 </template>

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">
+        <header class="flex justify-between items-center pb-4">
-            <h1 class="text-3xl font-roboto font-light">Wiadomości</h1>
+            <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>
+            <EmptyState v-else :icon="['fas', 'message']">
-                Lista pusta!
+                <template #title>Brak wiadomości</template>
-            </div>
+                <template #text>Nie przesłano jeszcze żadnej wiadomości.</template>
+            </EmptyState>
         </div>
     </div>
 </template>

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>
+        <EmptyState v-else :icon="['fas', 'bars-progress']">
-            Empty
+            <template #title>Brak projektów</template>
-        </div>
+            <template #text>Nie dodano jeszcze żadnego projektu.</template>
+        </EmptyState>
     </section>
 </template>