| 80 | }; |
| 81 | |
| 82 | const CategoriesDropdown = () => { |
| 83 | const { items, refine } = useMenu({ |
| 84 | attribute: 'category', |
| 85 | sortBy: ['isRefined', 'count:desc'], |
| 86 | limit: 20, |
| 87 | transformItems: transformCategories, |
| 88 | }); |
| 89 | |
| 90 | const refinedItems = items.filter((item) => item.isRefined); |
| 91 | |
| 92 | const label = () => { |
| 93 | if (refinedItems.length === 1) { |
| 94 | return refinedItems[0].label; |
| 95 | } |
| 96 | |
| 97 | if (refinedItems.length > 1) { |
| 98 | return `${refinedItems[0].label} + ${refinedItems.length - 1}`; |
| 99 | } |
| 100 | |
| 101 | if (items.length === 0) { |
| 102 | return 'No categories'; |
| 103 | } |
| 104 | |
| 105 | return 'All categories'; |
| 106 | }; |
| 107 | |
| 108 | return ( |
| 109 | <DropdownCheckbox label={label()} items={items} refine={refine} showCount /> |
| 110 | ); |
| 111 | }; |
| 112 | |
| 113 | export { CategoriesDropdown, LanguagesDropdown }; |