add tags input

packages/app/public/static/locales/en_US/translation.json

@@ -801,6 +801,9 @@
   },
   "tag_edit_modal": {
     "edit_tags": "Edit Tags",
-    "done": "Done"
+    "done": "Done",
+    "tags_input": {
+      "tag_name": "tag name"
+    }
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -801,6 +801,9 @@
   },
   "tag_edit_modal": {
     "edit_tags": "タグの編集",
-    "done": "完了"
+    "done": "完了",
+    "tags_input": {
+      "tag_name": "タグ名"
+    }
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -805,6 +805,9 @@
   },
   "tag_edit_modal": {
     "edit_tags": "编辑标签",
-    "done": "完毕"
+    "done": "完毕",
+    "tags_input": {
+      "tag_name": "标签名称"
+    }
   }
 }

packages/app/src/components/Page/TagsInput.tsx

@@ -2,6 +2,7 @@ import React, {
   FC, useRef, useState, useCallback,
 } from 'react';
 
+import { useTranslation } from 'next-i18next';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
 import { useSWRxTagsSearch } from '~/stores/tag';
@@ -20,6 +21,7 @@ type Props = {
 }
 
 const TagsInput: FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
   const tagsInputRef = useRef<TypeaheadInstance>(null);
 
   const [resultTags, setResultTags] = useState<string[]>([]);
@@ -71,7 +73,7 @@ const TagsInput: FC<Props> = (props: Props) => {
         onSearch={searchHandler}
         onKeyDown={keyDownHandler}
         options={resultTags} // Search result (Some tag names)
-        placeholder="tag name"
+        placeholder={t('tag_edit_modal.tags_input.tag_name')}
         autoFocus={props.autoFocus}
       />
     </div>