diff --git a/src/components/Elements/MainModal/scss/marketplace/_main.scss b/src/components/Elements/MainModal/scss/marketplace/_main.scss index 1cff87fc..80cc95f8 100644 --- a/src/components/Elements/MainModal/scss/marketplace/_main.scss +++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss @@ -517,3 +517,60 @@ p.author { margin-bottom: 0 !important; } } + +.filter-options-container { + display: flex; + flex-flow: row; + gap: 20px; + margin: 20px 0; + align-items: center; + justify-content: space-between; +} + +.filter-chips { + display: flex; + flex-flow: row; + gap: 12px; + align-items: center; + + .filter-chip { + all: unset; + padding: 8px 20px; + border-radius: 24px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; + user-select: none; + + @include themed { + background-color: t($modal-sidebarActive); + color: t($color); + } + + &:hover { + @include themed { + background-color: rgba(255, 255, 255, 0.15); + } + } + + &.active { + @include themed { + background-color: #fff; + color: #000; + } + + &:hover { + @include themed { + background-color: #f0f0f0; + } + } + } + + &:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.5); + outline-offset: 2px; + } + } +} diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx index 1f09718f..9969f863 100644 --- a/src/features/marketplace/components/Items/Items.jsx +++ b/src/features/marketplace/components/Items/Items.jsx @@ -1,18 +1,31 @@ import variables from 'config/variables'; -import React, { memo } from 'react'; +import React, { memo, useState } from 'react'; import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md'; import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; import { Button } from 'components/Elements'; +import Dropdown from '../../../../components/Form/Settings/Dropdown/Dropdown'; -function filterItems(item, filter) { +function filterItems(item, filter, categoryFilter) { const lowerCaseFilter = filter.toLowerCase(); - return ( + const textMatch = item.name?.toLowerCase().includes(lowerCaseFilter) || filter === '' || item.author?.toLowerCase().includes(lowerCaseFilter) || - item.type?.toLowerCase().includes(lowerCaseFilter) - ); + item.type?.toLowerCase().includes(lowerCaseFilter); + + // Apply category filter + if (categoryFilter === 'all') { + return textMatch; + } + + const categoryMap = { + quotes: 'quote_packs', + photos: 'photo_packs', + presets: 'preset_settings', + }; + + return textMatch && item.type === categoryMap[categoryFilter]; } function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) { @@ -71,7 +84,27 @@ function Items({ filter, moreByCreator, showCreateYourOwn, + filterOptions = false, + onSortChange, }) { + const [selectedCategory, setSelectedCategory] = useState('all'); + const [sortType, setSortType] = useState(localStorage.getItem('sortMarketplace') || 'a-z'); + + const filterCategories = [ + { id: 'all', label: 'All' }, + { id: 'quotes', label: 'Quotes' }, + { id: 'photos', label: 'Photos' }, + { id: 'presets', label: 'Presets' }, + ]; + + const handleSortChange = (value) => { + setSortType(value); + localStorage.setItem('sortMarketplace', value); + if (onSortChange) { + onSortChange(value); + } + }; + const shouldShowCollection = ((collection && !onCollection && (filter === null || filter === '')) || (type === 'collections' && !onCollection && (filter === null || filter === ''))) && @@ -114,9 +147,34 @@ function Items({ )} )} + {/* Items Filter Options */} + {filterOptions && ( +
+
+ {filterCategories.map((category) => ( + + ))} +
+ handleSortChange(value)} + items={[ + { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') }, + { value: 'z-a', text: variables.getMessage('modals.main.addons.sort.z_a') }, + ]} + /> +
+ )}
{items - ?.filter((item) => filterItems(item, filter)) + ?.filter((item) => filterItems(item, filter, filterOptions ? selectedCategory : 'all')) .map((item, index) => ( ) : ( <> -
+ {/*
{variables.getMessage('modals.main.navbar.marketplace')} -
+
*/}
{this.props.type !== 'collections' && (
@@ -499,15 +501,6 @@ class Marketplace extends PureComponent {
)} - this.changeSort(value)} - items={[ - { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') }, - { value: 'z-a', text: variables.getMessage('modals.main.addons.sort.z_a') }, - ]} - />
)} @@ -541,6 +534,7 @@ class Marketplace extends PureComponent { ) ) : ( this.toggle('item', input)} collectionFunction={(input) => this.toggle('collection', input)} filter={this.state.filter} + onSortChange={(value) => this.changeSort(value)} showCreateYourOwn={true} /> )}