From e44dbd0fa4b485d8e157157a8ec47a6a01b0ed57 Mon Sep 17 00:00:00 2001
From: lleohao <12764126+lleohao@users.noreply.github.com>
Date: Tue, 3 Sep 2024 05:43:19 +0000
Subject: [PATCH] feat: add query translation

---
 apps/client/public/locales/en/search.json            | 5 +++++
 apps/client/public/locales/zh/search.json            | 5 +++++
 apps/client/src/features/search/search-spotlight.tsx | 8 +++++---
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 apps/client/public/locales/en/search.json
 create mode 100644 apps/client/public/locales/zh/search.json

diff --git a/apps/client/public/locales/en/search.json b/apps/client/public/locales/en/search.json
new file mode 100644
index 00000000..d06882a8
--- /dev/null
+++ b/apps/client/public/locales/en/search.json
@@ -0,0 +1,5 @@
+{
+  "Search...": "Search...",
+  "Start typing to search...": "Start typing to search...",
+  "No results found...": "No results found..."
+}
diff --git a/apps/client/public/locales/zh/search.json b/apps/client/public/locales/zh/search.json
new file mode 100644
index 00000000..5f848780
--- /dev/null
+++ b/apps/client/public/locales/zh/search.json
@@ -0,0 +1,5 @@
+{
+  "Search...": "搜索...",
+  "Start typing to search...": "开始输入以搜索...",
+  "No results found...": "未找到结果..."
+}
diff --git a/apps/client/src/features/search/search-spotlight.tsx b/apps/client/src/features/search/search-spotlight.tsx
index 1fc26aef..10f63130 100644
--- a/apps/client/src/features/search/search-spotlight.tsx
+++ b/apps/client/src/features/search/search-spotlight.tsx
@@ -6,11 +6,13 @@ import { useNavigate } from "react-router-dom";
 import { useDebouncedValue } from "@mantine/hooks";
 import { usePageSearchQuery } from "@/features/search/queries/search-query";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { useTranslation } from "react-i18next";
 
 interface SearchSpotlightProps {
   spaceId?: string;
 }
 export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
+  const { t } = useTranslation("search");
   const navigate = useNavigate();
   const [query, setQuery] = useState("");
   const [debouncedSearchQuery] = useDebouncedValue(query, 300);
@@ -65,16 +67,16 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
         }}
       >
         <Spotlight.Search
-          placeholder="Search..."
+          placeholder={t("Search...")}
           leftSection={<IconSearch size={20} stroke={1.5} />}
         />
         <Spotlight.ActionsList>
           {query.length === 0 && pages.length === 0 && (
-            <Spotlight.Empty>Start typing to search...</Spotlight.Empty>
+            <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
           )}
 
           {query.length > 0 && pages.length === 0 && (
-            <Spotlight.Empty>No results found...</Spotlight.Empty>
+            <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
           )}
 
           {pages.length > 0 && pages}