refactor: show not found song

radishes-music · Jan 9, 2024 · 9300832 · 9300832
1 parent a24b823
commit 9300832
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/pages/header/component/search.vue b/src/pages/header/component/search.vue
@@ -89,7 +89,24 @@
 
         <div v-else class="space-y-2">
           <div v-if="state.loading" class="flex justify-center items-center">
-            <img class="w-14 h-14" src="/loading-list.svg" alt="" />
+            <img class="w-20 h-20" src="/loading-list.svg" alt="" />
+          </div>
+
+          <div
+            class="flex flex-col items-center justify-center"
+            v-else-if="!searchStore.hasSearchResult"
+          >
+            <ph-music-note-simple
+              :size="30"
+              weight="duotone"
+              class="transform rotate-12"
+            />
+            <div class="mt-2 text-center">
+              Not Found
+              <span class="text-primary italic break-keep font-bold"
+                >“{{ state.keyword }}”</span
+              >
+            </div>
           </div>
 
           <div v-else>

diff --git a/src/pinia/search.ts b/src/pinia/search.ts
@@ -18,6 +18,7 @@ export const useSearcStore = defineStore<
   },
   {
     hasSearchHistory: () => boolean
+    hasSearchResult: () => boolean
   },
   {
     addSearchHistory: (keyword: string) => void
@@ -39,6 +40,14 @@ export const useSearcStore = defineStore<
   getters: {
     hasSearchHistory() {
       return this.searchHistory.length > 0
+    },
+    hasSearchResult() {
+      return (
+        this.searchResult.albums?.length > 0 ||
+        this.searchResult.artists?.length > 0 ||
+        this.searchResult.playlists?.length > 0 ||
+        this.searchResult.songs?.length > 0
+      )
     }
   },
   actions: {