diff --git a/src/Api/members.json b/src/Api/members.json
index 2156279..42fa89e 100644
--- a/src/Api/members.json
+++ b/src/Api/members.json
@@ -21,7 +21,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -34,7 +34,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -47,7 +47,7 @@
"hometown": "Львів",
"type": "Напів професіонал",
"category": "Перший дорослий",
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 1987
},
@@ -60,7 +60,7 @@
"hometown": "Дубляни",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 1995
},
@@ -73,7 +73,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2021
},
@@ -86,7 +86,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2018
},
@@ -99,7 +99,7 @@
"hometown": "Львів",
"type": "Напів професіонал",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2011
},
@@ -125,7 +125,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2023
},
@@ -138,7 +138,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2020
},
@@ -151,7 +151,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2020
},
@@ -164,7 +164,7 @@
"hometown": "Львів",
"type": "Напів професіонал",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 1985
},
@@ -177,7 +177,7 @@
"hometown": "Свалява, Закарпатська обл.",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -190,7 +190,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2023
},
@@ -203,7 +203,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2022
},
@@ -229,7 +229,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2011
},
@@ -242,7 +242,7 @@
"hometown": "Львів",
"type": "Напів професіонал",
"category": "Третій дорослий",
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -255,7 +255,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -268,7 +268,7 @@
"hometown": "Львів",
"type": "Тренер",
"category": "КМС",
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 1986
},
@@ -294,7 +294,7 @@
"hometown": "Львів",
"type": "Професіонал",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 2017
},
@@ -307,7 +307,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 2023
},
@@ -320,7 +320,7 @@
"hometown": "Львів",
"type": "Тенісна мама",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 2017
},
@@ -333,7 +333,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 2014
},
@@ -346,7 +346,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2015
},
@@ -359,7 +359,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2022
},
@@ -372,7 +372,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2019
},
@@ -385,7 +385,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2018
},
@@ -398,7 +398,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2014
},
@@ -411,7 +411,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2022
},
@@ -424,7 +424,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2014
},
@@ -437,7 +437,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2022
},
@@ -450,7 +450,7 @@
"hometown": "Львів",
"type": "Професіонал",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -463,7 +463,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2023
},
@@ -476,7 +476,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -489,7 +489,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 2016
},
@@ -515,7 +515,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2022
},
@@ -528,7 +528,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2022
},
@@ -541,7 +541,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 1988
},
@@ -554,7 +554,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2019
},
@@ -567,7 +567,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2010
},
@@ -580,7 +580,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2020
},
@@ -606,7 +606,7 @@
"hometown": "Новоселиця, Закарпатська обл.",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -619,7 +619,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -632,7 +632,7 @@
"hometown": "Стрий",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2001
},
@@ -645,7 +645,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2023
},
@@ -658,7 +658,7 @@
"hometown": "Краматорськ",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -671,7 +671,7 @@
"hometown": "Трускавець",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний та Дворучний",
"joinTennisYear": 1990
},
@@ -684,7 +684,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2019
},
@@ -697,7 +697,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2023
},
@@ -710,7 +710,7 @@
"hometown": "Миколаїв, Львівська обл.",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -723,7 +723,7 @@
"hometown": "Львів",
"type": "Тренер",
"category": "МС",
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 1994
},
@@ -736,7 +736,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2014
},
@@ -749,7 +749,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2014
},
@@ -762,7 +762,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2017
},
@@ -788,7 +788,7 @@
"hometown": "Міжгір'я",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2014
},
@@ -814,7 +814,7 @@
"hometown": "Львів",
"type": "Професіонал",
"category": "МС",
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2014
},
@@ -827,7 +827,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2014
},
@@ -840,7 +840,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2010
},
@@ -853,7 +853,7 @@
"hometown": "Брюховичі",
"type": "Професіонал",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -866,7 +866,7 @@
"hometown": "Берегове, Закарпатська обл.",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2021
},
@@ -879,7 +879,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2017
},
@@ -892,7 +892,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -905,7 +905,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2023
},
@@ -918,7 +918,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2021
},
@@ -931,7 +931,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -944,7 +944,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Одноручний",
"joinTennisYear": 2018
},
@@ -957,7 +957,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2018
},
@@ -970,7 +970,7 @@
"hometown": "Львів",
"type": "Дитяча група",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2021
},
@@ -983,7 +983,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -996,7 +996,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2018
},
@@ -1009,7 +1009,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2016
},
@@ -1022,7 +1022,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2015
},
@@ -1035,7 +1035,7 @@
"hometown": "Львів",
"type": "Аматор",
"category": null,
- "forhand": "Зправа",
+ "forhand": "Справа",
"backhand": "Дворучний",
"joinTennisYear": 2018
}
diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
deleted file mode 100644
index 7fcf418..0000000
--- a/src/components/Filter/Filter.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useEffect, useState } from "react";
-import {
- Form,
- Group,
- IconSvg,
- IconWrap,
- Input,
- Label,
- Section,
-} from "./Filter-styled";
-
-import sprite from "../../sprite.svg";
-
-export const Filter = ({ membersArray, setVisibleMembersArray }) => {
- const [isFilterFocused, setIsFilterFocused] = useState(false);
- const [inputValue, setInputValue] = useState("");
-
- useEffect(() => {
- const visibleMembersArray = membersArray?.filter((member) =>
- member.name.toLowerCase().includes(inputValue?.toLowerCase())
- );
- setVisibleMembersArray(visibleMembersArray);
- }, [inputValue, membersArray, setVisibleMembersArray]);
-
- return (
-
- );
-};
diff --git a/src/components/Filter/Filter-styled.jsx b/src/components/Filter/FilterBar-styled.jsx
similarity index 75%
rename from src/components/Filter/Filter-styled.jsx
rename to src/components/Filter/FilterBar-styled.jsx
index 86a7662..a041c12 100644
--- a/src/components/Filter/Filter-styled.jsx
+++ b/src/components/Filter/FilterBar-styled.jsx
@@ -20,27 +20,29 @@ export const Form = styled.form`
export const Group = styled.div`
display: flex;
- flex-wrap: wrap;
+ flex-direction: column;
justify-content: center;
- align-items: center;
+ align-items: left;
gap: 10px;
`;
export const Label = styled.label`
+ padding-left: 20px;
+
display: flex;
- justify-content: center;
- align-items: center;
- gap: 10px;
+ justify-content: left;
+ align-items: left;
+ gap: 6px;
- font-size: 16px;
- font-weight: 600;
+ font-size: 14px;
+ font-weight: 400;
transition: var(--main-transition);
color: ${(props) =>
props.isFilterFocused
? "var(--accent-hover-color)"
- : "var(--primary-black-color)"};
+ : "var(--primary-grey-color)"};
`;
export const Input = styled.input`
@@ -53,16 +55,20 @@ export const Input = styled.input`
outline: none;
border-radius: 50px;
- border: 2px solid var(--primary-black-color);
+ border: 1px solid var(--primary-black-color);
color: var(--primary-black-color);
background-color: var(--secondary-white-color);
transition: var(--main-transition);
+ &::placeholder {
+ color: var(--primary-grey-color);
+ }
+
&:focus {
background-color: var(--primary-white-color);
- border: 2px solid var(--accent-hover-color);
+ border: 1px solid var(--accent-hover-color);
}
`;
@@ -70,8 +76,8 @@ export const IconWrap = styled.span`
display: inline-flex;
justify-content: center;
align-items: center;
- width: 20px;
- height: 20px;
+ width: 16px;
+ height: 16px;
`;
export const IconSvg = styled.svg`
diff --git a/src/components/Filter/FilterBar.jsx b/src/components/Filter/FilterBar.jsx
new file mode 100644
index 0000000..fd2d6b0
--- /dev/null
+++ b/src/components/Filter/FilterBar.jsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { Form, Section } from "./FilterBar-styled";
+import { FilterByName } from "./FilterByName";
+import { useEffect } from "react";
+import { FilterByType } from "./FilterByType";
+
+export const FilterBar = ({ membersArray, setVisibleMembersArray }) => {
+ const [filtredByNameArray, setFiltredByNameArray] = useState(membersArray);
+
+ useEffect(() => {
+ setVisibleMembersArray(filtredByNameArray);
+ }, [filtredByNameArray, setVisibleMembersArray]);
+
+ return (
+
+ );
+};
diff --git a/src/components/Filter/FilterByName.jsx b/src/components/Filter/FilterByName.jsx
new file mode 100644
index 0000000..16776d6
--- /dev/null
+++ b/src/components/Filter/FilterByName.jsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { Group, IconSvg, IconWrap, Input, Label } from "./FilterBar-styled";
+
+import sprite from "../../sprite.svg";
+
+export const FilterByName = ({ membersArray, setFiltredByNameArray }) => {
+ const [isFilterFocused, setIsFilterFocused] = useState(false);
+ const [inputValue, setInputValue] = useState("");
+
+ useEffect(() => {
+ const visibleMembersArray = membersArray?.filter((member) =>
+ member.name.toLowerCase().includes(inputValue?.toLowerCase())
+ );
+ setFiltredByNameArray(visibleMembersArray);
+ }, [inputValue, membersArray, setFiltredByNameArray]);
+
+ return (
+
+
+
+ setInputValue(e.target.value)}
+ onFocus={() => setIsFilterFocused(true)}
+ onBlur={() => setIsFilterFocused(false)}
+ />
+
+ );
+};
diff --git a/src/components/Filter/FilterByType.jsx b/src/components/Filter/FilterByType.jsx
new file mode 100644
index 0000000..bb0a43c
--- /dev/null
+++ b/src/components/Filter/FilterByType.jsx
@@ -0,0 +1,161 @@
+import Select from "react-select";
+import { useState } from "react";
+import { Group, Label } from "./FilterBar-styled";
+
+export const FilterByType = () => {
+ const [isFilterFocused, setIsFilterFocused] = useState(false);
+ const [inputValue, setInputValue] = useState("");
+
+ const typeOptions = [
+ "Усі",
+ "Аматор",
+ "Професіонал",
+ "Напів професіонал",
+ "Тренер",
+ "Дитяча група",
+ "Тенісна мама",
+ "Чемпіон",
+ ];
+
+ const selectStyles = {
+ NoOptionsMessage: (styles) => ({
+ ...styles,
+ background: "skyblue",
+ color: "var(--primary-grey-color)",
+ }),
+
+ placeholder: (styles) => ({
+ ...styles,
+ fontSize: "16px",
+ cursor: "pointer",
+ color: "var(--primary-grey-color)",
+ }),
+
+ input: (styles) => ({
+ ...styles,
+ padding: "0px",
+ margin: "0px",
+ }),
+
+ singleValue: (styles) => ({
+ ...styles,
+ }),
+
+ valueContainer: (styles) => ({
+ ...styles,
+ paddingLeft: "20px",
+ }),
+
+ container: (styles, { isFocused }) => ({
+ ...styles,
+ fontSize: "16px",
+ color: "var(--primary-black-color)",
+ border: isFocused
+ ? "1px solid var(--accent-hover-color)"
+ : "1px solid var(--primary-black-color)",
+ borderRadius: "50px",
+ }),
+
+ indicatorsContainer: (styles) => ({
+ ...styles,
+ paddingRight: "16px",
+ }),
+
+ dropdownIndicator: (styles, { isFocused }) => ({
+ ...styles,
+ padding: "0px",
+ color: isFocused
+ ? "var(--accent-hover-color)"
+ : "var(--primary-black-color)",
+ transform: isFocused ? "scaleY(-1)" : "scaleY(1)",
+ transition: "var(--main-transition)",
+ "&:hover": {
+ color: "var(--accent-hover-color)", // Колір при ховері
+ },
+ }),
+
+ control: (styles, { isFocused }) => ({
+ ...styles,
+ height: "50px",
+ width: "220px",
+ border: isFocused ? "none" : "none",
+ borderRadius: "50px",
+ boxShadow: "none",
+
+ backgroundColor: isFocused
+ ? "var(--primary-white-color)"
+ : "var(--secondary-white-color)",
+ cursor: "pointer",
+ }),
+
+ menu: (styles) => ({
+ ...styles,
+ border: "none",
+ boxShadow: "rgba(0, 0, 0, 0.1) 0px 0px 10px",
+ overflow: "hidden",
+ borderRadius: "20px",
+ padding: "10px 0px",
+ }),
+
+ option: (styles, { isFocused, isSelected }) => ({
+ ...styles,
+ fontSize: "16px",
+ cursor: "pointer",
+ padding: "5px 20px",
+ color: isSelected
+ ? "var(--primary-black-color)"
+ : isFocused
+ ? "var(--accent-hover-color)"
+ : "var(--primary-grey-color)",
+ backgroundColor: "var(--primary-white-color)",
+ }),
+
+ menuList: (styles) => ({
+ ...styles,
+ "::-webkit-scrollbar": {
+ width: "32px",
+ },
+ "::-webkit-scrollbar-track": {
+ background: "transparent",
+ },
+ "::-webkit-scrollbar-thumb": {
+ background: "var(--secondary-white-color)",
+ borderRadius: "9999px",
+ border: "12px solid rgba(0, 0, 0, 0)",
+ backgroundClip: "padding-box",
+ },
+ "::-webkit-scrollbar-thumb:hover": {
+ background: "var(--accent-hover-color)",
+ borderRadius: "9999px",
+ border: "12px solid rgba(0, 0, 0, 0)",
+ backgroundClip: "padding-box",
+ },
+ }),
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/src/index.css b/src/index.css
index 82f1a22..308f58f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,6 +15,8 @@
--primary-white-color: #ffffff;
--secondary-white-color: #f7f7f7;
+ --primary-grey-color: #bdbdbd;
+
--box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
diff --git a/src/pages/MembersPage/MembersPage.jsx b/src/pages/MembersPage/MembersPage.jsx
index c41ceb4..815ecaa 100644
--- a/src/pages/MembersPage/MembersPage.jsx
+++ b/src/pages/MembersPage/MembersPage.jsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { MembersList } from "../../components/MembersList/MembersList";
import { membersApi } from "../../Api/ApiRequest";
-import { Filter } from "../../components/Filter/Filter";
+import { FilterBar } from "../../components/Filter/FilterBar";
const MembersPage = () => {
const [membersArray, setMembersArray] = useState([]);
@@ -17,7 +17,7 @@ const MembersPage = () => {
return (
<>
-