refactor: move search away from marketplace

This commit is contained in:
alexsparkes
2024-06-14 00:06:11 +01:00
parent f7d8104531
commit 0f9393d3e6
3 changed files with 83 additions and 43 deletions

View File

@@ -20,8 +20,8 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) {
item._onCollection = onCollection;
return (
<motion.div
whileHover={{ y: -10 }}
transition={{ type: "spring", stiffness: 150, damping: 15, mass: 0.5 }}
whileHover={{ y: -10 }}
transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.5 }}
className="item"
onClick={() => toggleFunction(item)}
key={item.name}
@@ -121,6 +121,35 @@ function Items({
)}
</div>
)}
<div className="flex flex-row gap-2 my-3">
<div
onClick={() => {
this.setState({ type: 'all' });
this.getItems();
}}
className="transition-all duration-200 bg-white rounded-full px-6 py-2 text-base text-black"
>
All
</div>
<div
onClick={() => {
this.setState({ type: 'photo_packs' });
this.getItems();
}}
className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white"
>
Photo Packs
</div>
<div
onClick={() => {
this.setState({ type: 'quote_packs' });
this.getItems();
}}
className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white"
>
Quote Packs
</div>
</div>
<div className={`items ${moreByCreator ? 'creatorItems' : ''}`}>
{items
?.filter((item) => filterItems(item, filter))

View File

@@ -385,7 +385,7 @@ class Marketplace extends PureComponent {
</>
) : (
<>
<div className="flexTopMarketplace">
{/*<div className="flexTopMarketplace">
<span className="mainTitle">
{variables.getMessage('modals.main.navbar.marketplace')}
</span>
@@ -424,38 +424,10 @@ class Marketplace extends PureComponent {
},
]}
/>
</div>
</div>*/}
</>
)}
<div className="flex flex-row gap-2">
<div
onClick={() => {
this.setState({ type: 'all' });
this.getItems();
}}
className="transition-all duration-200 bg-white rounded-full px-6 py-2 text-base text-black"
>
All
</div>
<div
onClick={() => {
this.setState({ type: 'photo_packs' });
this.getItems();
}}
className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white"
>
Photo Packs
</div>
<div
onClick={() => {
this.setState({ type: 'quote_packs' });
this.getItems();
}}
className="transition-all duration-200 bg-[#333] hover:bg-[#222222] cursor-pointer rounded-full px-6 py-2 text-base text-white"
>
Quote Packs
</div>
</div>
{this.props.type === 'collections' && !this.state.collection ? (
this.state.items.map((item) =>
!item.news ? (