refactor: useTranslation in CreateTagDialog (#1356)

web/src/components/CreateTagDialog.tsx

@@ -1,6 +1,7 @@
 import { Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { useTagStore } from "../store/module";
 import { getTagSuggestionList } from "../helpers/api";
 import { matcher } from "../labs/marked/matcher";
@@ -21,6 +22,7 @@ const validateTagName = (tagName: string): boolean => {
 const CreateTagDialog: React.FC<Props> = (props: Props) => {
   const { destroy } = props;
   const tagStore = useTagStore();
+  const { t } = useTranslation();
   const [tagName, setTagName] = useState<string>("");
   const [suggestTagNameList, setSuggestTagNameList] = useState<string[]>([]);
   const [showTagSuggestions, setShowTagSuggestions] = useState<boolean>(false);
@@ -82,7 +84,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="dialog-header-container">
-        <p className="title-text">Create Tag</p>
+        <p className="title-text">{t("tag-list.create-tag")}</p>
         <button className="btn close-btn" onClick={() => destroy()}>
           <Icon.X />
         </button>
@@ -91,7 +93,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
         <Input
           className="mb-2"
           size="md"
-          placeholder="TAG_NAME"
+          placeholder={t("tag-list.tag-name")}
           value={tagName}
           onChange={handleTagNameChanged}
           onKeyDown={handleTagNameInputKeyDown}
@@ -101,7 +103,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
         />
         {tagNameList.length > 0 && (
           <>
-            <p className="w-full mt-2 mb-1 text-sm text-gray-400">All tags</p>
+            <p className="w-full mt-2 mb-1 text-sm text-gray-400">{t("tag-list.all-tags")}</p>
             <div className="w-full flex flex-row justify-start items-start flex-wrap">
               {Array.from(tagNameList)
                 .sort()

web/src/locales/en.json

@@ -142,7 +142,10 @@
     "text-placeholder": "Starts with ^ to use regex"
   },
   "tag-list": {
-    "tip-text": "Input `#tag` to create"
+    "tip-text": "Input `#tag` to create",
+    "create-tag": "Create Tag",
+    "all-tags": "All Tags",
+    "tag-name": "TAG_NAME"
   },
   "search": {
     "quickly-filter": "Quickly filter"

web/src/locales/zh.json

@@ -142,7 +142,10 @@
     "text-placeholder": "以 ^ 开头使用正则表达式"
   },
   "tag-list": {
-    "tip-text": "输入`#tag `来创建标签"
+    "tip-text": "输入`#tag `来创建标签",
+    "create-tag": "创建标签",
+    "all-tags": "全部标签",
+    "tag-name": "标签名称"
   },
   "search": {
     "quickly-filter": "快速过滤"