diff --git a/src/pages/ProductsPage/ProductsPage.scss b/src/pages/ProductsPage/ProductsPage.scss index 156ad8e..1ff0ace 100644 --- a/src/pages/ProductsPage/ProductsPage.scss +++ b/src/pages/ProductsPage/ProductsPage.scss @@ -35,6 +35,17 @@ &__filters { display: flex; gap: 16px; + flex-wrap: wrap; + + &-wrapper-r { + display: flex; + gap: 10px; + } + + &-wrapper-l { + display: flex; + gap: 10px; + } } &__filter { @@ -47,6 +58,25 @@ @include on-mobile { width: 136px; } + + &--search { + display: flex; + align-items: end; + } + + &-search-input { + height: 40px; + + @include body-text; + padding-inline: 5px; + background-color: var(--page-bg-color); + color: var(--color-primary); + border: 1px solid #b4bdc3; + + &:placeholder-shown { + @include small-text; + } + } } &__filter-label { diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx index ea2dd6b..d1190ba 100644 --- a/src/pages/ProductsPage/ProductsPage.tsx +++ b/src/pages/ProductsPage/ProductsPage.tsx @@ -55,6 +55,7 @@ export const ProductsPage: FC = ({ category }) => { const sortBy = searchParams.get('sort') || 'newest'; const itemsPerPage = searchParams.get('perPage') || '16'; const currentPage = +(searchParams.get('page') || 1); + const searchQuery = searchParams.get('search') || ''; useEffect(() => { setIsLoading(true); @@ -68,7 +69,7 @@ export const ProductsPage: FC = ({ category }) => { throw new Error('Something went wrong'); }) .finally(() => setIsLoading(false)); - }, [category, itemsPerPage, sortBy]); + }, [category]); const handlePageChange = (value: number) => { const params = new URLSearchParams(searchParams); @@ -90,6 +91,13 @@ export const ProductsPage: FC = ({ category }) => { setSearchParams(params); }; + const handleSearchChange = (event: React.ChangeEvent) => { + const params = new URLSearchParams(searchParams); + params.set('search', event.target.value.trimStart()); + params.set('page', String(1)); + setSearchParams(params); + }; + const pagesExist = itemsPerPage === 'all'; const totalPages = pagesExist ? 0 @@ -98,7 +106,13 @@ export const ProductsPage: FC = ({ category }) => { const startIndex = currentPage === 1 ? 0 : +itemsPerPage * (currentPage - 1); const endIndex = startIndex + +itemsPerPage; - const sortedProducts = sortProducts(products, sortBy); + const filteredProducts = products.filter(product => + product.name + .toLowerCase() + .trim() + .includes(searchQuery.toLowerCase().trim()), + ); + const sortedProducts = sortProducts(filteredProducts, sortBy); const visibleProducts = pagesExist ? sortedProducts : sortedProducts.slice(startIndex, endIndex); @@ -110,34 +124,46 @@ export const ProductsPage: FC = ({ category }) => {

{category}

-

{products.length} models

+

{filteredProducts.length} models

-
-

Sort by

- -
- -
-

Items on page

- +
+
+

Sort by

+ +
+
+

Items on page

+ +
-
- +
+
+ +
+
+ +