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 ( +
+
e.preventDefault()}> + + + + setInputValue(e.target.value)} + onFocus={() => setIsFilterFocused(true)} + onBlur={() => setIsFilterFocused(false)} + /> + +
+
+ ); +}; 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 @@ + + + +