Add localizations for SearchModal

components/CharacterUnit/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
@@ -19,6 +20,8 @@ interface Props {
 }
 
 const CharacterUnit = (props: Props) => {
+    const { t } = useTranslation('common')
+
     const router = useRouter()
     const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
 
@@ -72,7 +75,7 @@ const CharacterUnit = (props: Props) => {
 
     const editableImage = (
         <SearchModal 
-            placeholderText="Search for a character..." 
+            placeholderText={t('search.placeholders.character')} 
             fromPosition={props.position} 
             object="characters"
             send={props.updateObject}>

components/SummonUnit/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
@@ -19,6 +20,8 @@ interface Props {
 }
 
 const SummonUnit = (props: Props) => {
+    const { t } = useTranslation('common')
+    
     const [imageUrl, setImageUrl] = useState('')
 
     const router = useRouter()
@@ -80,7 +83,7 @@ const SummonUnit = (props: Props) => {
 
     const editableImage = (
         <SearchModal 
-            placeholderText="Search for a summon..." 
+            placeholderText={t('search.placeholders.summon')}
             fromPosition={props.position} 
             object="summons"
             send={props.updateObject}>

components/WeaponUnit/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import Router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
 import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
@@ -23,6 +24,8 @@ interface Props {
 }
 
 const WeaponUnit = (props: Props) => {
+    const { t } = useTranslation('common')
+
     const [imageUrl, setImageUrl] = useState('')
 
     const router = useRouter()
@@ -85,7 +88,7 @@ const WeaponUnit = (props: Props) => {
 
     const editableImage = (
         <SearchModal 
-            placeholderText="Search for a weapon..." 
+            placeholderText={t('search.placeholders.weapon')} 
             fromPosition={props.position} 
             object="weapons"
             send={props.updateObject}>

public/locales/en/common.json

@@ -157,6 +157,18 @@
         "loading": "Loading saved teams...",
         "not_found": "You haven't saved any teams"
     },
+    "search": {
+        "errors": {
+            "start_typing": "Start typing the name of a {{object}}",
+            "min_length": "Type at least 3 characters",
+            "no_results": "No results found for '{{query}}'"
+        },
+        "placeholders": {
+            "weapon": "Search for a weapon...",
+            "summon": "Search for a summon...",
+            "character": "Search for a weapon..."
+        }
+    },
     "teams": {
         "title": "Discover Teams",
         "loading": "Loading teams...",

public/locales/ja/common.json

@@ -158,6 +158,18 @@
         "loading": "ロード中...",
         "not_found": "編成はまだ保存していません"
     },
+    "search": {
+        "errors": {
+            "start_typing": "{{object}}名を入力してください",
+            "min_length": "3文字以上を入力してください",
+            "no_results": "'{{query}}'の検索結果が見つかりませんでした"
+        },
+        "placeholders": {
+            "weapon": "武器を検索...",
+            "summon": "召喚石を検索...",
+            "character": "キャラを検索..."
+        }
+    },
     "teams": {
         "title": "編成一覧",
         "loading": "ロード中...",