added filter by name to members page

src/Api/members.json

@@ -118,7 +118,7 @@
   },
   {
     "id": "10",
-    "name": "Пенкальський Aртем",
+    "name": "Пенкальський Артем",
     "birthDate": "2017-09-25",
     "avatar": "https://raw.githubusercontent.com/M-Farmaha/100-club/main/src/ImageGallery/photos/1.jpg",
     "sex": "male",

src/components/Filter/Filter-styled.jsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+
+export const Section = styled.section`
+  margin-top: 100px;
+
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  background-color: var(--secondary-white-color);
+`;
+
+export const Form = styled.form`
+  height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Group = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+
+export const Label = styled.label`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  font-size: 16px;
+  font-weight: 600;
+
+  transition: var(--main-transition);
+
+  color: ${(props) =>
+    props.isFilterFocused
+      ? "var(--accent-hover-color)"
+      : "var(--primary-black-color)"};
+`;
+
+export const Input = styled.input`
+  width: 290px;
+  height: 50px;
+  padding: 0px 20px;
+
+  font-family: inherit;
+  font-size: 16px;
+
+  outline: none;
+  border-radius: 50px;
+  border: 2px solid var(--primary-black-color);
+
+  color: var(--primary-black-color);
+  background-color: var(--secondary-white-color);
+
+  transition: var(--main-transition);
+
+  &:focus {
+    background-color: var(--primary-white-color);
+    border: 2px solid var(--accent-hover-color);
+  }
+`;
+
+export const IconWrap = styled.span`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+`;
+
+export const IconSvg = styled.svg`
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+`;

src/components/Filter/Filter.jsx

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

src/components/ImageGallery/ImageGallery-styled.jsx

@@ -1,12 +1,13 @@
 import styled from "styled-components";
 
 export const Section = styled.section`
-  padding-top: 100px;
+  margin-top: 100px;
   min-height: 1200px;
-  
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
+
+  background-color: var(--secondary-white-color);
 `;
 
 export const ImageGalleryList = styled.ul`

src/components/MembersList/MembersItem.jsx

@@ -2,7 +2,7 @@ import {
   MembersItemLi,
   MembersItemText,
   MembersItemWrap,
-} from "./MemdersList-styled";
+} from "./MembersList-styled";
 
 export const MembersItem = ({ el, index }) => {
   return (

src/components/MembersList/MemdersList-styled.jsx → src/components/MembersList/MembersList-styled.jsx

@@ -1,9 +1,9 @@
 import styled from "styled-components";
 
 export const Section = styled.section`
-  padding-top: 200px;
   padding-bottom: 100px;
   min-height: 1200px;
+  background-color: var(--secondary-white-color);
 `;
 
 export const MembersUl = styled.ul`

src/components/MembersList/MembersList.jsx

@@ -1,12 +1,12 @@
-import { MembersUl, Section } from "./MemdersList-styled";
+import { MembersUl, Section } from "./MembersList-styled";
 import { MembersItem } from "./MembersItem";
 
-export const MembersList = ({ membersArray }) => {
+export const MembersList = ({ visibleMembersArray }) => {
   return (
     <>
       <Section>
         <MembersUl>
-          {membersArray?.map((el, index) => (
+          {visibleMembersArray?.map((el, index) => (
             <MembersItem key={el.id} el={el} index={index} />
           ))}
         </MembersUl>

src/index.css

@@ -4,10 +4,6 @@
 
   --main-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  --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;
-
   --accent-color: rgb(105, 150, 0);
   --accent-hover-color: rgb(151, 211, 0);
 
@@ -18,6 +14,12 @@
 
   --primary-white-color: #ffffff;
   --secondary-white-color: #f7f7f7;
+
+  --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;
+
+  --input-shadow: rgba(255, 255, 255, 0.1) -4px -2px 6px 0px inset, rgba(70, 70, 70, 0.1) 4px 2px 4px 0px inset;
 }
 
 body {

src/pages/MembersPage/MembersPage.jsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { MembersList } from "../../components/MembersList/MembersList";
 import { membersApi } from "../../Api/ApiRequest";
+import { Filter } from "../../components/Filter/Filter";
 
 const MembersPage = () => {
   const [membersArray, setMembersArray] = useState([]);
+  const [visibleMembersArray, setVisibleMembersArray] = useState(membersArray);
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -15,7 +17,11 @@ const MembersPage = () => {
 
   return (
     <>
-      <MembersList membersArray={membersArray} />
+      <Filter
+        membersArray={membersArray}
+        setVisibleMembersArray={setVisibleMembersArray}
+      />
+      <MembersList visibleMembersArray={visibleMembersArray} />
     </>
   );
 };