Implement localizations

This translates the static section headers in FilterModal as well as various parts of MentionTypeahead's UI

components/common/MentionTypeahead/index.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react'
 import { getCookie } from 'cookies-next'
+import { useTranslation } from 'next-i18next'
+
 import type {
   Option,
   RenderTokenProps,
@@ -47,6 +49,7 @@ const MentionTypeahead = ({
   exclusions,
   ...props
 }: Props) => {
+  const { t } = useTranslation('common')
   const locale = getCookie('NEXT_LOCALE')
     ? (getCookie('NEXT_LOCALE') as string)
     : 'en'
@@ -100,7 +103,11 @@ const MentionTypeahead = ({
 
   function renderMenu(results: Option[], menuProps: RenderMenuProps) {
     return (
-      <Menu {...menuProps} className={styles.menu} emptyLabel="No items found">
+      <Menu
+        {...menuProps}
+        className={styles.menu}
+        emptyLabel={t('modals.filters.prompts.not_found')}
+      >
         {results.map((option, index) => (
           <MenuItem key={index} option={option} position={index}>
             {renderMenuItemChild(option)}
@@ -163,8 +170,8 @@ const MentionTypeahead = ({
       useCache={false}
       placeholder={placeholder}
       positionFixed={true}
-      promptText={'Start typing...'}
+      promptText={t('modals.filters.prompts.type')}
-      searchText={'Searching...'}
+      searchText={t('modals.filters.prompts.searching')}
       renderMenu={renderMenu}
       renderMenuItemChildren={renderMenuItemChild}
       renderToken={renderToken}

components/filters/FilterModal/index.tsx

@@ -456,22 +456,16 @@ const FilterModal = (props: Props) => {
           {filterNotice()}
           <section>
             <div className={styles.header}>
-              <h3>Team items</h3>
+              <h3>{t('modals.filters.headers.items.name')}</h3>
-              <p>
+              <p>{t('modals.filters.headers.items.description')}</p>
-                Show or hide teams that have specific characters, weapons, or
-                summons
-              </p>
             </div>
             {inclusionField}
             {exclusionField}
           </section>
           <section>
             <div className={styles.header}>
-              <h3>Team details</h3>
+              <h3>{t('modals.filters.headers.details.name')}</h3>
-              <p>
+              <p>{t('modals.filters.headers.details.description')}</p>
-                Filter teams by various properties, like full auto or button
-                presses
-              </p>
             </div>
             {chargeAttackField()}
             {fullAutoField()}

public/locales/en/common.json

@@ -252,6 +252,16 @@
     },
     "filters": {
       "title": "Advanced filters",
+      "headers": {
+        "items": {
+          "name": "Filter items",
+          "description": "Show or hide teams that have specific characters, weapons, or summons"
+        },
+        "details": {
+          "name": "Filter details",
+          "description": "Filter teams by various properties, like full auto or button presses"
+        }
+      },
       "labels": {
         "charge_attack": "Charge Attack",
         "full_auto": "Full Auto",
@@ -264,8 +274,8 @@
         "name_quality": "Hide untitled teams",
         "user_quality": "Hide anonymous users",
         "original_only": "Hide remixed teams",
-        "inclusion": "Including items",
+        "inclusion": "Show teams with these items",
-        "exclusion": "Excluding items"
+        "exclusion": "Hide teams with these items"
       },
       "notice": "Filters set on <strong>user profiles</strong> and in <strong>your saved teams</strong> will not be saved",
       "options": {
@@ -274,8 +284,13 @@
         "on_and_off": "On and Off"
       },
       "placeholders": {
-        "inclusion": "Parties that have...",
+        "inclusion": "Teams that have...",
-        "exclusion": "Parties that don't have..."
+        "exclusion": "Teams that don't have..."
+      },
+      "prompts": {
+        "type": "Start typing...",
+        "searching": "Searching...",
+        "not_found": "No results found"
       },
       "buttons": {
         "confirm": "Save filters",

public/locales/ja/common.json

@@ -249,6 +249,16 @@
     },
     "filters": {
       "title": "フィルター設定",
+      "headers": {
+        "items": {
+          "name": "アイテムをフィルター",
+          "description": "キャラクター・武器・召喚石が編成に包含・除外されているかに基づいて表示する"
+        },
+        "details": {
+          "name": "詳細をフィルター",
+          "description": "フルオートやポチなどの編成詳細に基づいて表示する"
+        }
+      },
       "labels": {
         "charge_attack": "奥義",
         "full_auto": "フルオート",
@@ -261,8 +271,8 @@
         "name_quality": "無題の編成なし",
         "user_quality": "無名のユーザーなし",
         "original_only": "リミックスなし",
-        "inclusion": "アイテムを包含",
+        "inclusion": "包含されているアイテム",
-        "exclusion": "アイテムを除外"
+        "exclusion": "除外されているアイテムめn"
       },
       "notice": "フィルターは<strong>保存した編成</strong>と<strong>ユーザープロフィール</strong>には保存されません",
       "options": {
@@ -274,6 +284,11 @@
         "inclusion": "〇〇が入っている",
         "exclusion": "〇〇が入っていない"
       },
+      "prompts": {
+        "type": "入力してください",
+        "searching": "検索中...",
+        "not_found": "見つかりませんでした"
+      },
       "buttons": {
         "confirm": "フィルターを保存する",
         "clear": "保存したフィルターをリセット"