diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 38e40e0..38f2720 100755
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -131,5 +131,15 @@
"title": "Результаты поиска",
"totalResults":"Всего найдено",
"nothingFound": "Ничего не найдено"
+ },
+ "filters": {
+ "authors":"Авторы",
+ "publicationsType": "Публикации",
+ "publisher":"Издатель",
+ "publicationTopic":"Тема публикации",
+ "appliedFitlers":"Фильтры",
+ "clearAll":"Очистить всё",
+ "enterAuthorsName":"Введите имя автора",
+ "showAll":"Показать все"
}
}
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 75afd11..5b4810b 100755
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -5,7 +5,7 @@
import classNames from "classnames";
import { StyleType } from "core/_variants";
import React from "react";
-import {ReactComponent as DeleteIcon} from "./Filters/svg/chest.svg"
+import { ReactComponent as DeleteIcon } from "../assets/svg/xmark.svg";
/* -------------------------------------------------------------------------- */
/* Component props */
@@ -49,11 +49,13 @@ function Badge({
>
{children}
{closeOption && (
- <button
- onClick={onClick}
- className=" text-white pr-1 pl-3 py-1"
- >
- <div><DeleteIcon className="h-[9px] w-[9px]" /></div>
+ <button onClick={onClick} className="h-4 w-5">
+ <div>
+ <DeleteIcon
+ className="relative top-1 left-1 h-4 w-5 fill-white hover:fill-white stroke-white
+ "
+ />
+ </div>
</button>
)}
</span>
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 913ceb0..8ba3fc9 100755
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -22,7 +22,7 @@ const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
)}
htmlFor={props.id}
>
- <div className="w-6 h-6 relative">
+ <div className="w-5 h-5 relative">
<input
className="peer appearance-none transition-colors bg-transparent border-2 border-gray-300 w-6 h-6
rounded checked:bg-blue-500 checked:border-blue-500
@@ -33,8 +33,8 @@ const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
checked={isChecked}
{...props}
/>
- <div className="h-2 w-2 absolute top-0 left-0">
- <Checkmark className="h-6 w-6 fill-white hover:fill-white stroke-white" />
+ <div className="h-2 w-2 absolute top-0.5 left-0.5">
+ <Checkmark className="h-5 w-5 fill-white hover:fill-white stroke-white" />
</div>
</div>
{children}
diff --git a/src/components/Filters/AppiledFilters.tsx b/src/components/Filters/AppiledFilters.tsx
index 570382f..e4562ff 100644
--- a/src/components/Filters/AppiledFilters.tsx
+++ b/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>
diff --git a/src/components/Filters/Filter.tsx b/src/components/Filters/Filter.tsx
index 384b37d..43f1e0f 100644
--- a/src/components/Filters/Filter.tsx
+++ b/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>
diff --git a/src/components/Filters/SearchFilterBar.tsx b/src/components/Filters/SearchFilterBar.tsx
index f9e6362..0314ac1 100644
--- a/src/components/Filters/SearchFilterBar.tsx
+++ b/src/components/Filters/SearchFilterBar.tsx
@@ -2,8 +2,10 @@ import { useState, useCallback, Fragment } from "react";
import { Combobox, Transition } from "@headlessui/react";
import { IProduct } from "./IProdutct";
import Checkbox from "components/Checkbox";
-import { ReactComponent as SearchIcon } from "./svg/searchIcon.svg";
+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);
@@ -44,8 +47,8 @@ export default function SearchFilterBar({
>
<div className="basis-6 ">
<Combobox.Button>
- <div className="pl-1 pt-1">
- <SearchIcon />
+ <div className="pl-1 pt-1.5">
+ <SearchIcon className="h-5 w-6 fill-gray-400 hover:fill-gray-400 stroke-gray-400" />
</div>
</Combobox.Button>
</div>
@@ -73,18 +76,18 @@ export default function SearchFilterBar({
{
"max-h-60 h-60 overflow-auto": showFilters === true,
"max-h-40 h-40 overflow-hidden":
- showFilters === false,
+ showFilters === false || hints.length <= 5,
},
],
])}
>
<li className="">
- {hints.length >= 5 && query !== "" && (
+ {hints.length >= 6 && query !== "" && (
<button
onClick={ShowAllFilters}
className="text-right text-blue-500 pl-2 text-sm font-medium"
>
- Показать всё({hints.length})
+ {t("filters.showAll")}({hints.length})
</button>
)}
</li>
@@ -102,7 +105,7 @@ export default function SearchFilterBar({
</li>
))
) : (
- <p className="text-blue-300 pl-2">Nothing Found</p>
+ <p className="text-blue-300 pl-2">Ничего не найдено</p>
)}
</ul>
)}
diff --git a/src/components/Filters/svg/chest.svg b/src/components/Filters/svg/chest.svg
deleted file mode 100644
index 3b1d9ff..0000000
--- a/src/components/Filters/svg/chest.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="12" height="13" viewBox="0 0 12 13" fill="white" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.9497 11.4498L1.05026 1.55027" stroke="white" stroke-width="2" stroke-linecap="round"/>
-<path d="M10.9497 1.55029L1.05025 11.4498" stroke="white" stroke-width="2" stroke-linecap="round"/>
-</svg>
diff --git a/src/components/Filters/svg/searchIcon.svg b/src/components/Filters/svg/searchIcon.svg
deleted file mode 100644
index dba33fe..0000000
--- a/src/components/Filters/svg/searchIcon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.1003 14.1184L10.4628 9.48086C11.1824 8.55051 11.5717 7.41301 11.5717 6.21658C11.5717 4.78444 11.0128 3.44158 10.0021 2.42908C8.99135 1.41658 7.64492 0.859436 6.21456 0.859436C4.78421 0.859436 3.43778 1.41836 2.42706 2.42908C1.41456 3.43979 0.857422 4.78444 0.857422 6.21658C0.857422 7.64694 1.41635 8.99336 2.42706 10.0041C3.43778 11.0166 4.78242 11.5737 6.21456 11.5737C7.41099 11.5737 8.54671 11.1844 9.47707 10.4666L14.1146 15.1023C14.1282 15.1159 14.1443 15.1267 14.1621 15.1341C14.1799 15.1414 14.1989 15.1452 14.2181 15.1452C14.2374 15.1452 14.2564 15.1414 14.2742 15.1341C14.292 15.1267 14.3081 15.1159 14.3217 15.1023L15.1003 14.3255C15.1139 14.3119 15.1247 14.2958 15.132 14.278C15.1394 14.2602 15.1432 14.2412 15.1432 14.2219C15.1432 14.2027 15.1394 14.1837 15.132 14.1659C15.1247 14.1481 15.1139 14.132 15.1003 14.1184ZM9.04314 9.04515C8.28599 9.80051 7.28242 10.2166 6.21456 10.2166C5.14671 10.2166 4.14314 9.80051 3.38599 9.04515C2.63064 8.28801 2.21456 7.28444 2.21456 6.21658C2.21456 5.14872 2.63064 4.14336 3.38599 3.38801C4.14314 2.63265 5.14671 2.21658 6.21456 2.21658C7.28242 2.21658 8.28778 2.63086 9.04314 3.38801C9.79849 4.14515 10.2146 5.14872 10.2146 6.21658C10.2146 7.28444 9.79849 8.28979 9.04314 9.04515Z" fill="#8C8C8C"/>
-</svg>