diff --git a/src/Api/members.json b/src/Api/members.json
index 1b56ccf..bd0a732 100644
--- a/src/Api/members.json
+++ b/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",
diff --git a/src/components/Filter/Filter-styled.jsx b/src/components/Filter/Filter-styled.jsx
new file mode 100644
index 0000000..86a7662
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx
new file mode 100644
index 0000000..7fcf418
--- /dev/null
+++ b/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 (
+
+ );
+};
diff --git a/src/components/ImageGallery/ImageGallery-styled.jsx b/src/components/ImageGallery/ImageGallery-styled.jsx
index 983e75a..5fecf17 100644
--- a/src/components/ImageGallery/ImageGallery-styled.jsx
+++ b/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`
diff --git a/src/components/MembersList/MembersItem.jsx b/src/components/MembersList/MembersItem.jsx
index 420baa3..44036ee 100644
--- a/src/components/MembersList/MembersItem.jsx
+++ b/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 (
diff --git a/src/components/MembersList/MemdersList-styled.jsx b/src/components/MembersList/MembersList-styled.jsx
similarity index 96%
rename from src/components/MembersList/MemdersList-styled.jsx
rename to src/components/MembersList/MembersList-styled.jsx
index 4569f8b..a314440 100644
--- a/src/components/MembersList/MemdersList-styled.jsx
+++ b/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`
diff --git a/src/components/MembersList/MembersList.jsx b/src/components/MembersList/MembersList.jsx
index 2ab6046..64657c9 100644
--- a/src/components/MembersList/MembersList.jsx
+++ b/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 (
<>
- {membersArray?.map((el, index) => (
+ {visibleMembersArray?.map((el, index) => (
))}
diff --git a/src/index.css b/src/index.css
index d737106..82f1a22 100644
--- a/src/index.css
+++ b/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 {
diff --git a/src/pages/MembersPage/MembersPage.jsx b/src/pages/MembersPage/MembersPage.jsx
index 8db4ed3..c41ceb4 100644
--- a/src/pages/MembersPage/MembersPage.jsx
+++ b/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 (
<>
-
+
+
>
);
};
diff --git a/src/sprite.svg b/src/sprite.svg
index 2b9ad85..414291c 100644
--- a/src/sprite.svg
+++ b/src/sprite.svg
@@ -608,5 +608,9 @@
+
+
+
+