✨ Add random search placeholder

likecoin · Nov 24, 2024 · 129c493 · 129c493
1 parent 8a02cae
commit 129c493
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 4 deletions.
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -5,7 +5,13 @@
       preset="tertiary"
       @click="toggleSearch"
     >
-      <IconSearch />
+      <div class="flex flex-nowrap items-center gap-[8px]">
+        <IconSearch />
+        <p
+          class="text-medium-gray whitespace-nowrap"
+          v-text="$t('listing_page_search_label')"
+        />
+      </div>
     </ButtonV2>
     <div
       class="flex items-center justify-center cursor-pointer p-[8px] desktop:hidden"
@@ -42,10 +48,11 @@
     >
       <IconSearch />
       <input
-        :value="searchQuery"
+        ref="searchInput"
         class="w-full bg-transparent border-0 focus-visible:outline-none"
         type="text"
-        :placeholder="$t('gutenberg_search_placeholder')"
+        :value="searchQuery"
+        :placeholder="placeholderText"
         @input="debouncedUpdateSearchKeyword"
       />
       <ButtonV2
@@ -63,6 +70,7 @@
 
 <script>
 import debounce from 'lodash.debounce';
+import { SEARCH_SUGGESTIONS } from '@/constant/index';
 
 export default {
   name: 'SearchBar',
@@ -75,6 +83,7 @@ export default {
   data() {
     return {
       isSearchOpen: false,
+      placeholderText: this.$t('gutenberg_search_placeholder'),
     };
   },
   mounted() {
@@ -88,6 +97,10 @@ export default {
         this.$emit('clear');
       } else {
         this.$emit('open');
+        this.placeholderText = this.getRandomPlaceholder();
+        this.$nextTick(() => {
+          this.$refs.searchInput?.focus();
+        });
       }
       this.isSearchOpen = !this.isSearchOpen;
     },
@@ -97,6 +110,11 @@ export default {
       },
       200
     ),
+    getRandomPlaceholder() {
+      const shuffled = [...SEARCH_SUGGESTIONS].sort(() => Math.random() - 0.5);
+      const randomTerms = shuffled.slice(0, 3);
+      return randomTerms.join('、');
+    },
   },
 };
 </script>
diff --git a/src/constant/index.js b/src/constant/index.js
@@ -428,3 +428,18 @@ export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'read:nftcollection',
   'write:nftcollection',
 ];
+
+export const SEARCH_SUGGESTIONS = [
+  '免費',
+  '小說',
+  '旅遊',
+  '報刊',
+  '心靈',
+  '運動',
+  '董啟章',
+  '李立峯',
+  '新聞',
+  '理財',
+  '區塊鏈',
+  '繪本',
+];
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -480,6 +480,7 @@
   "listing_page_QA_label": "What is the difference between ebooks and paperbacks?",
   "listing_page_QA_title": "FAQ",
   "listing_page_search": "Search",
+  "listing_page_search_label": "book title or author",
   "listing_page_search_not_found": "Please try different keywords.",
   "listing_page_search_recommend": "Or explore our recommended books:",
   "listing_page_search_result": "The search results for '{query}':",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -480,6 +480,7 @@
   "listing_page_QA_label": "電子書和紙本書有什麼分別?",
   "listing_page_QA_title": "常見問題",
   "listing_page_search": "搜尋",
+  "listing_page_search_label": "搜尋書名或作者",
   "listing_page_search_not_found": "請嘗試使用其他關鍵字。",
   "listing_page_search_recommend": "或是您可以瀏覽我們的推薦書籍：",
   "listing_page_search_result": "以下為 “{query}” 的搜尋結果：",

diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
@@ -142,8 +142,11 @@
             'relative',
           ]"
         >
-          <div class="flex items-center justify-center">
+          <div
+            class="flex items-center justify-center cursor-pointer px-[10px]"
+          >
             <SearchBar
+              class="w-full"
               :search-query="searchQuery"
               @open="handleSearchBarOpen"
               @clear="handleSearchBarClear"