added filter by type

src/components/Filter/Filter-styled.jsx → 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,25 +55,29 @@ 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);
   }
 `;
 
 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`

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 (
+    <Section>
+      <Form onSubmit={(e) => e.preventDefault()}>
+        <FilterByName
+          membersArray={membersArray}
+          setFiltredByNameArray={setFiltredByNameArray}
+        />
+        <FilterByType />
+      </Form>
+    </Section>
+  );
+};

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 (
+    <Group>
+      <Label isFilterFocused={isFilterFocused}>
+        <IconWrap>
+          <IconSvg>
+            <use href={sprite + "#icon-search"}></use>
+          </IconSvg>
+        </IconWrap>
+        Знайти учасника за іменем
+      </Label>
+
+      <Input
+        autoComplete="off"
+        type="text"
+        value={inputValue}
+        placeholder="Введіть ім'я"
+        onChange={(e) => setInputValue(e.target.value)}
+        onFocus={() => setIsFilterFocused(true)}
+        onBlur={() => setIsFilterFocused(false)}
+      />
+    </Group>
+  );
+};

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 (
+    <Group>
+      <Label isFilterFocused={isFilterFocused}>Фільтрувати за типом</Label>
+      <Select
+        placeholder={"Усі"}
+        noOptionsMessage={() => "Немає збігів"}
+        maxMenuHeight={270}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
+        styles={selectStyles}
+        inputId="type"
+        value={inputValue}
+        onFocus={() => setIsFilterFocused(true)}
+        onBlur={() => setIsFilterFocused(false)}
+        // menuIsOpen={isFilterFocused}
+
+        onChange={(selectedOption) => setInputValue(selectedOption)}
+        options={typeOptions.map((type) => ({
+          value: type,
+          label: type,
+        }))}
+      ></Select>
+    </Group>
+  );
+};

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;

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 (
     <>
-      <Filter
+      <FilterBar
         membersArray={membersArray}
         setVisibleMembersArray={setVisibleMembersArray}
       />