80532 change and use translation

packages/app/resource/locales/en_US/translation.json

@@ -567,7 +567,7 @@
     "popover_desc": "Input channel name. You can notify multiple channels by entering a comma-separated list."
   },
   "search_result": {
-    "result_meta": "Found \"{{keyword}}\" in {{total}}.",
+    "result_meta": "Searched results for \"{{keyword}}\"",
     "deletion_mode_btn_lavel": "Select and delete page",
     "cancel": "Cancel",
     "delete": "Delete",

packages/app/resource/locales/ja_JP/translation.json

@@ -567,7 +567,7 @@
     "popover_desc": "チャンネル名を入れてください。カンマ区切りのリストを入力することで複数のチャンネルに通知することができます。"
   },
   "search_result": {
-    "result_meta": "{{total}}件のページが見つかりました。検索ワード: \"{{keyword}}\"",
+    "result_meta": "\"{{keyword}}\" の検索結果",
     "deletion_mode_btn_lavel": "ページを指定して削除",
     "cancel": "キャンセル",
     "delete": "削除",

packages/app/resource/locales/zh_CN/translation.json

@@ -839,7 +839,7 @@
 		"use_os_settings": "使用操作系统设置"
 	},
 	"search_result": {
-		"result_meta": "在{{total}中找到了{{keyword}。",
+		"result_meta": "搜索结果为 \"{{keyword}}\"",
 		"deletion_mode_btn_lavel": "选择并删除页面",
 		"cancel": "取消",
 		"delete": "删除",

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type SearchResultMeta = {
   took : number,
@@ -15,6 +16,7 @@ type Props = {
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
+  const { t } = useTranslation('');
   const { SearchResultList, SearchControl, SearchResultContent } = props;
   return (
     <div className="content-main">
@@ -23,7 +25,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
           <nav><SearchControl></SearchControl></nav>
           <div className="d-flex align-items-start justify-content-between mt-1">
             <div className="search-result-meta">
-              <i className="icon-magnifier" /> Found {props.searchResultMeta.total} pages with &quot;{props.searchingKeyword}&quot;
+              <i className="icon-magnifier" /> {t('search_result.result_meta', { keyword: props.searchingKeyword })}
             </div>
           </div>