add translate

public/locales/ru/translation.json

@@ -123,6 +123,15 @@
     "title": "Результаты поиска",
     "totalResults":"Всего найдено",
     "nothingFound": "Ничего не найдено"
+  },
+  "filters": {
+    "authors":"Авторы",
+    "publicationsType": "Публикации",
+    "publisher":"Издатель",
+    "publicationTopic":"Тема публикации",
+    "appliedFitlers":"Фильтры",
+    "clearAll":"Очистить всё",
+    "enterAuthorsName":"Введите имя автора",
+    "showAll":"Показать все"
   }
-
 }

src/components/Filters/AppiledFilters.tsx

@@ -5,6 +5,8 @@ import React from "react";
 import Badge from "components/Badge";
 import { IProduct } from "./IProdutct";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
 /* -------------------------------------------------------------------------- */
 /*                               Component props                              */
 /* -------------------------------------------------------------------------- */
@@ -23,6 +25,9 @@ export default function AppiledFilters({
   clearAll,
   className,
 }: Props) {
+
+  const [t, i18next] = useTranslation()
+
   return (
     <>
       <div
@@ -32,13 +37,13 @@ export default function AppiledFilters({
         )}
       >
         <div className="flex flex-row items-center justify-between space-x-3 ">
-          <div className="font-medium">Фильтры</div>
+          <div className="font-medium">{t("filters.appliedFitlers")}</div>
           <div>
             <button
               onClick={clearAll}
               className="font-normal text-sm text-gray-400"
             >
-              Очистить всё
+              {t("filters.clearAll")}
             </button>
           </div>
         </div>

src/components/Filters/Filter.tsx

@@ -5,6 +5,8 @@ import SearchFilterBar from "./SearchFilterBar";
 import axios from "axios";
 import { useDebounce } from "./functions/debounce";
 import { IProduct } from "./IProdutct";
+import { useTranslation } from "react-i18next";
+
 
 type Props = {
   className?: string;
@@ -26,6 +28,9 @@ export default function Fiter({ className }: Props) {
   };
   const debounced = useDebounce(query);
 
+  const [t, i18next] = useTranslation()
+
+
   async function fetchProducts() {
     const response = await axios.get(
       `https://dummyjson.com/products/search?q=${debounced}`
@@ -83,23 +88,23 @@ export default function Fiter({ className }: Props) {
             delFilter={DelFilter}
             clearAll={clearAll}
           ></AppiledFilters>
-          <Disclosure caption="Авторы">
+          <Disclosure caption={t("filters.authors")}>
             <SearchFilterBar
               hints={hints}
               isChecked={isChecked}
               handleChange={handleChange}
               onChange={onChange}
               query={query}
-              placeHolder={"Введите имя автора"}
+              placeHolder={t("filters.enterAuthorsName")}
             />
           </Disclosure>
-          <Disclosure caption="Публикации">
+          <Disclosure caption={t("filters.publicationsType")}>
             <p>контент...</p>
           </Disclosure>
-          <Disclosure caption="Тип издания">
+          <Disclosure caption={t("filters.publisher")}>
             <p>контент...</p>
           </Disclosure>
-          <Disclosure caption="Тематика публикаций">
+          <Disclosure caption={t("filters.publicationTopic")}>
             <p>контент...</p>
           </Disclosure>
         </div>

src/components/Filters/SearchFilterBar.tsx

@@ -4,6 +4,8 @@ import { IProduct } from "./IProdutct";
 import Checkbox from "components/Checkbox";
 import { ReactComponent as SearchIcon } from "assets/svg/search.svg";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
 
 type Props = {
   hints: IProduct[];
@@ -26,6 +28,7 @@ export default function SearchFilterBar({
 }: Props): JSX.Element {
   const [checkList, setCheckList] = useState(hints);
   const [showFilters, SetShowFilters] = useState(false);
+  const [t, i18next] = useTranslation()
 
   const ShowAllFilters = useCallback(() => {
     SetShowFilters((prev) => !prev);
@@ -84,7 +87,7 @@ export default function SearchFilterBar({
                             onClick={ShowAllFilters}
                             className="text-right text-blue-500 pl-2 text-sm font-medium"
                           >
-                            Показать всё({hints.length})
+                            {t("filters.showAll")}({hints.length})
                           </button>
                         )}
                       </li>