products filter modified.

knightfury16 · Nov 23, 2022 · 1430bbc · 1430bbc
1 parent f8ea1a3
commit 1430bbc
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 44 deletions.
diff --git a/components/products-content/index.tsx b/components/products-content/index.tsx
@@ -7,7 +7,7 @@ const ProductsContent = () => {
   return (
     <section className="products-content">
       <div className="products-content__intro">
-        <h2>Men's Tops <span>(133)</span></h2>
+        <h2>Top Products</h2>
         <button type="button" onClick={() => setOrderProductsOpen(!orderProductsOpen)} className="products-filter-btn"><i className="icon-filters"></i></button>
         <form className={`products-content__filter ${orderProductsOpen ? 'products-order-open' : ''}`}>
           <div className="products__filter__select">

diff --git a/components/products-filter/index.tsx b/components/products-filter/index.tsx
@@ -1,12 +1,9 @@
 import { useState } from 'react';
 import Checkbox from './form-builder/checkbox';
-import CheckboxColor from './form-builder/checkbox-color';
 import Slider from 'rc-slider';
 
 // data
-import productsTypes from './../../utils/data/products-types';
-import productsColors from './../../utils/data/products-colors';
-import productsSizes from './../../utils/data/products-sizes';
+import {category} from './../../utils/constants'
 
 const { createSliderWithTooltip } = Slider;
 const Range = createSliderWithTooltip(Slider.Range);
@@ -16,26 +13,30 @@ const ProductsFilter = () => {
 
   const addQueryParams = () => {
     // query params changes
-  }
+  };
 
   return (
     <form className="products-filter" onChange={addQueryParams}>
-      <button type="button" 
-        onClick={() => setFiltersOpen(!filtersOpen)} 
-        className={`products-filter__menu-btn ${filtersOpen ? 'products-filter__menu-btn--active' : ''}`}>
-          Add Filter <i className="icon-down-open"></i>
+      <button
+        type="button"
+        onClick={() => setFiltersOpen(!filtersOpen)}
+        className={`products-filter__menu-btn ${
+          filtersOpen ? 'products-filter__menu-btn--active' : ''
+        }`}
+      >
+        Add Filter <i className="icon-down-open"></i>
       </button>
-
-      <div className={`products-filter__wrapper ${filtersOpen ? 'products-filter__wrapper--open' : ''}`}>
+
+      <div
+        className={`products-filter__wrapper ${
+          filtersOpen ? 'products-filter__wrapper--open' : ''
+        }`}
+      >
         <div className="products-filter__block">
           <button type="button">Product type</button>
           <div className="products-filter__block__content">
-            {productsTypes.map(type => (
-              <Checkbox 
-                key={type.id} 
-                name="product-type" 
-                label={type.name} 
-              />
+            {category.map(type => (
+              <Checkbox key={type} name="product-type" label={type} />
             ))}
           </div>
         </div>
@@ -46,36 +47,21 @@ const ProductsFilter = () => {
             <Range min={0} max={20} defaultValue={[3, 10]} tipFormatter={value => `${value}%`} />
           </div>
         </div>
-        
+
         <div className="products-filter__block">
-          <button type="button">Size</button>
-          <div className="products-filter__block__content checkbox-square-wrapper">
-            {productsSizes.map(type => (
-              <Checkbox 
-                type="square" 
-                key={type.id} 
-                name="product-size" 
-                label={type.label} />
-            ))}
+          <button type="button">Rating</button>
+          <div className="products-filter__block__content">
+            <Range min={1} max={5} defaultValue={[5]} tipFormatter={value => `${value}`} />
           </div>
         </div>
-
         <div className="products-filter__block">
-          <button type="button">Color</button>
-          <div className="products-filter__block__content">
-            <div className="checkbox-color-wrapper">
-              {productsColors.map(type => (
-                <CheckboxColor key={type.id} valueName={type.color} name="product-color" color={type.color} />
-              ))}
-            </div>
-          </div>
+          <button type="submit" className="btn btn-submit btn--rounded btn--yellow">
+            Apply
+          </button>
         </div>
-
-        <button type="submit" className="btn btn-submit btn--rounded btn--yellow">Apply</button>
       </div>
     </form>
-  )
-}
-
-export default ProductsFilter
-
+  );
+};
+
+export default ProductsFilter;
diff --git a/utils/constants.ts b/utils/constants.ts
@@ -0,0 +1,5 @@
+export const category = [
+  'Accessories',
+  'Outdoors',
+  'Home'
+];