Se crea filterPanel y se ajustan estilos del panel

src/Utils/filterHelper.jsx

@@ -0,0 +1,18 @@
+const priceFilter = (cost) => {
+  return (product) => {
+    switch (cost) {
+      case 1:
+        return product.cost <= 200;
+      case 2:
+        return product.cost > 200 && product.cost <= 500;
+      case 3:
+        return product.cost > 500 && product.cost <= 1000;
+      case 4:
+        return product.cost > 1001 && product.cost <= 2000;
+      case 5:
+        return product.cost > 2000;
+      default:
+        return product;
+    }
+  };
+};

src/components/Products/FilterPanel.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import "./products.scss";
+
+const optionsData = {
+  price: {
+    0: "Any price",
+    1: "0 - 200 coins",
+    2: "201 - 500 coins",
+    3: "501 - 1000 coins",
+    4: "1001 - 2000 coins",
+    5: "+ 2000 coins",
+  },
+};
+
+const FilterPanel = ({ currentAmount, totalAmount, onFilter }) => {
+  return (
+    <>
+      <div className="filter-container">
+        <div className="pagination-info">
+          Showing {currentAmount} of {totalAmount} products
+        </div>
+        <div className="filter">Filter by:</div>
+        <select className="filter-select" onChange={(e) => onFilter(e)}>
+          {Object.entries(optionsData.price).map(([key, value], index) => {
+            return (
+              <option key={index} value={key}>
+                {value}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    </>
+  );
+};
+export default FilterPanel;

src/components/Products/ProductsList.jsx

@@ -1,17 +1,25 @@
-import React, { useEffect, useContext } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { usePagination } from "../../hooks/index";
-import Product from "./Product";
 import { ProductsContext } from "../../providers/index";
+import Product from "./Product";
+import FilterPanel from "./FilterPanel";
 import "./products.scss";
 
+const ITEMS_PER_PAGE = 16;
+
 const ProductsList = () => {
   const { products, setProductResponse } = useContext(ProductsContext);
 
+  const [filter, setFilter] = useState(0);
+
   useEffect(() => {
     if (!products) return;
   }, [products]);
 
-  const { next, prev, currentData } = usePagination(products, 16);
+  const { next, prev, currentData, currentAmount } = usePagination(
+    products,
+    ITEMS_PER_PAGE
+  );
 
   const onPrev = () => {
     prev();
@@ -22,9 +30,18 @@ const ProductsList = () => {
     window.scrollTo(0, 0);
   };
 
-  if (products.length > 0) {
+  const handleFilter = (event) => {
+    console.log(event.target.value);
+  };
+
+  if (products.length) {
     return (
       <>
+        <FilterPanel
+          currentAmount={currentAmount()}
+          totalAmount={products.length}
+          onFilter={handleFilter}
+        />
         <div className="cards">
           {currentData().map((item, key) => {
             return (

src/components/Products/products.scss

@@ -1,5 +1,6 @@
-.cards {
-  margin: 0 40px;
+.cards,
+.filter-container {
+  margin: 10px 40px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -8,7 +9,7 @@
   }
 }
 .card {
-  margin: 30px;
+  margin: 15px;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
   background-color: #fff;
   width: 250px;
@@ -143,3 +144,25 @@
   font-weight: bold;
   border: none;
 }
+
+.pagination-info,
+.filter {
+  font-family: "Raleway", sans-serif;
+  text-transform: uppercase;
+  font-size: 15px;
+  letter-spacing: 2px;
+  font-weight: 1000;
+  color: #292727;
+}
+
+.filter {
+  margin-left: 70px;
+  margin-right: 10px;
+}
+.filter-select {
+  padding-left: 5px;
+  outline: none;
+  border: none;
+  border-radius: 100px;
+  height: 19px;
+}

src/hooks/usePagination.jsx

@@ -23,6 +23,12 @@ const usePagination = (data, itemsPerPage) => {
     return data.slice(begin, end);
   };
 
-  return { next, prev, jump, currentData, currentPage, maxPage };
+  const currentAmount = () => {
+    const accumulate = itemsPerPage * (currentPage - 1);
+    const current = currentData().length;
+    return accumulate + current;
+  };
+
+  return { next, prev, jump, currentData, currentAmount, currentPage, maxPage };
 };
 export default usePagination;

src/services/productsService.jsx

@@ -1,4 +1,4 @@
-import * as API from "../api/API";
+import * as API from "../Utils/API";
 
 const headers = {
   "Content-Type": "application/json",

src/services/userService.jsx

@@ -1,4 +1,4 @@
-import * as API from "../api/API";
+import * as API from "../Utils/API";
 
 const headers = {
   "Content-Type": "application/json",