different themes of filter buttons

getmentor · Dec 2, 2021 · 6047edf · 6047edf
1 parent 0da45a1
commit 6047edf
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 36 deletions.
diff --git a/src/components/FilterGroupDropdown.js b/src/components/FilterGroupDropdown.js
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import Dropdown from 'rc-dropdown'
 
 import 'rc-dropdown/assets/index.css'
@@ -9,22 +8,61 @@ export default function FilterGroupDropdown({
   onFilterSelect,
   allSelectedValues,
   multiSelect = true,
+  theme = 'rounded',
 }) {
+  const themes = {
+    rounded: {
+      ul: 'text-center mb-3 bg-gray-200 w-max p-1 rounded',
+      li: {
+        active:
+          'text-center text-sm rounded-full py-1 px-4 m-1 cursor-pointer w-max bg-gray-700 text-white',
+        inactive:
+          'text-center text-sm rounded-full py-1 px-4 m-1 cursor-pointer w-max bg-gray-300 hover:bg-gray-200 text-gray-600',
+      },
+      button: {
+        selected:
+          'text-sm rounded-full py-1 px-4 m-1 cursor-pointer bg-gray-300 text-gray-600 bg-gray-700 text-white',
+        not_selected:
+          'text-sm rounded-full py-1 px-4 m-1 cursor-pointer bg-gray-300 text-gray-600 bg-gray-300 hover:bg-gray-200 text-gray-600',
+      },
+      span: {
+        selected: 'mr-2 bg-gray-700 text-white',
+        not_selected: 'mr-2 text-gray-600',
+      },
+      badge:
+        'inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-500 rounded-full',
+    },
+    block: {
+      ul: 'text-center bg-gray-200 w-max',
+      li: {
+        active: 'text-center text-sm py-1 px-2 cursor-pointer w-auto bg-gray-700 text-white',
+        inactive:
+          'text-center text-sm py-1 px-2 cursor-pointer w-auto bg-gray-300 hover:bg-gray-200 text-gray-600',
+      },
+      button: {
+        selected:
+          'text-sm rounded-sm py-1 px-4 m-1 cursor-pointer bg-gray-300 text-gray-600 bg-gray-700 text-white',
+        not_selected:
+          'text-sm rounded-sm py-1 px-4 m-1 cursor-pointer bg-gray-300 text-gray-600 bg-indigo-200 hover:bg-gray-200 text-gray-600',
+      },
+      span: {
+        selected: 'mr-2 bg-gray-700 text-white',
+        not_selected: 'mr-2 text-gray-600',
+      },
+      badge:
+        'inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-500 rounded-full',
+    },
+  }
+
   const produceMenuItems = (list) => {
     return (
-      <ul className="text-center mb-3 bg-gray-200 w-max p-1 rounded">
+      <ul className={themes[theme].ul}>
         {list.map((tag) => {
           const isActive = multiSelect ? allSelectedValues.includes(tag) : allSelectedValues === tag
 
           return (
             <li
-              className={classNames(
-                'text-center text-sm rounded-full py-1 px-4 m-1 cursor-pointer w-max',
-                {
-                  'bg-gray-300 hover:bg-gray-200 text-gray-600': !isActive,
-                  'bg-gray-700 text-white': isActive,
-                }
-              )}
+              className={isActive ? themes[theme].li.active : themes[theme].li.inactive}
               key={tag}
               onClick={() => onFilterSelect(tag)}
             >
@@ -43,26 +81,19 @@ export default function FilterGroupDropdown({
   return (
     <Dropdown overlay={produceMenuItems(values)}>
       <button
-        className={classNames(
-          'text-sm rounded-full py-1 px-4 m-1 cursor-pointer bg-gray-300 text-gray-600',
-          {
-            'bg-gray-300 hover:bg-gray-200 text-gray-600': !selectedValuesCount,
-            'bg-gray-700 text-white': selectedValuesCount,
-          }
-        )}
+        className={
+          selectedValuesCount ? themes[theme].button.selected : themes[theme].button.not_selected
+        }
       >
         <span
-          className={classNames('mr-2', {
-            'text-gray-600': !selectedValuesCount,
-            'bg-gray-700 text-white': selectedValuesCount,
-          })}
+          className={
+            selectedValuesCount ? themes[theme].span.selected : themes[theme].span.not_selected
+          }
         >
           {title}
         </span>
         {multiSelect || selectedValuesCount ? (
-          <span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-500 rounded-full">
-            {selectedValuesCount}
-          </span>
+          <span className={themes[theme].badge}>{selectedValuesCount}</span>
         ) : (
           <span />
         )}

diff --git a/src/components/MentorsFilters.js b/src/components/MentorsFilters.js
@@ -104,16 +104,8 @@ export default function MentorsFilters(props) {
   }
 
   return (
-    <div className="text-center md:w-3/4 mx-auto">
+    <div className="text-center">
       <ul className="flex flex-wrap justify-left -m-1 mb-3">
-        <li
-          className="text-sm rounded-full py-1 px-4 m-1 cursor-pointer bg-primary-900 hover:bg-red-500 text-white"
-          key="reset"
-          onClick={onResetAll}
-        >
-          Сбросить все
-        </li>
-
         {allowSponsors && (
           <>
             {allFilters.sponsors.map((tag) => {
@@ -134,9 +126,7 @@ export default function MentorsFilters(props) {
             })}
           </>
         )}
-      </ul>
 
-      <ul className="flex flex-wrap justify-left -m-1 mb-3">
         <li>
           <FilterGroupDropdown
             title="Development"
@@ -181,9 +171,9 @@ export default function MentorsFilters(props) {
             allSelectedValues={appliedFilters.tags.values}
           />
         </li>
-      </ul>
+        {/* </ul>
 
-      <ul className="flex flex-wrap justify-left -m-1 mb-3">
+      <ul className="flex flex-wrap justify-left -m-1 mb-3"> */}
         {allFilters.byTags.rest.map((tag) => {
           const isActive = appliedFilters.tags.values.includes(tag)
 
@@ -211,6 +201,7 @@ export default function MentorsFilters(props) {
             values={Object.keys(allFilters.experience)}
             onFilterSelect={onClickExperience}
             allSelectedValues={appliedFilters.experience.values}
+            theme="block"
           />
         </li>
 
@@ -221,8 +212,17 @@ export default function MentorsFilters(props) {
             onFilterSelect={onClickPrice}
             allSelectedValues={appliedFilters.price.values}
             multiSelect={false}
+            theme="block"
           />
         </li>
+
+        <li
+          className="text-sm rounded-sm py-1 px-4 m-1 cursor-pointer bg-primary-900 hover:bg-red-500 text-white"
+          key="reset"
+          onClick={onResetAll}
+        >
+          Сбросить все
+        </li>
       </ul>
     </div>
   )

diff --git a/src/components/useMentors.js b/src/components/useMentors.js
@@ -94,6 +94,9 @@ export default function useMentors(allMentors, pageSize = 48) {
         set: setSelectedPrice,
         reset: () => setSelectedPrice(undefined),
       },
+      count: () => {
+        return selectedTags.length + selectedExperience.length + (selectedPrice ? 1 : 0)
+      },
     },
   ]
 }