chore: message no search results

USNightOwl · Jun 23, 2024 · 38c232d · 38c232d
1 parent e9d1258
commit 38c232d
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/Search/SearchHandle.vue b/src/components/Search/SearchHandle.vue
@@ -23,14 +23,18 @@
       </button>
     </form>
 
-    <div v-if="searchData.value?.results" class="grid md:grid-cols-2 grid-cols-1 gap-4 mt-3 flex-1 overflow-y-auto" ref="scroll">
+    <div v-if="searchData.value?.results?.data.length > 0" class="grid md:grid-cols-2 grid-cols-1 gap-4 mt-3 flex-1 overflow-y-auto" ref="scroll">
       <CardSearchResult
         v-for="item in searchData.value.results.data"
         :key="item.slug"
         :data="item"
         v-model:isShowSearchPopup="isShowSearchPopup"
       /> 
     </div>
+    <div v-else-if="searchData.value?.results?.data.length == 0" class="flex flex-col items-center justify-center text-gray-400 font-medium text-lg py-5">
+      <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"></path></svg>
+      <div>Chúng tớ không tìm thấy kết quả phù hợp.</div>
+    </div>
 
     <div class="border-t" v-if="searchData.value?.results">
       <custom-pagination