fix: show current tab

src/features/marketplace/components/Items/Items.jsx

@@ -2,6 +2,7 @@ import variables from 'config/variables';
 import React, { memo } from 'react';
 import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
+import { motion } from 'framer-motion';
 
 import { Button } from 'components/Elements';
 
@@ -18,7 +19,13 @@ function filterItems(item, filter) {
 function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) {
   item._onCollection = onCollection;
   return (
-    <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
+    <motion.div
+    whileHover={{ y: -10 }}
+    transition={{ type: "spring", stiffness: 150, damping: 15, mass: 0.5 }}
+      className="item"
+      onClick={() => toggleFunction(item)}
+      key={item.name}
+    >
       <img
         className="item-back"
         alt=""
@@ -56,7 +63,7 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator }) {
           </span>
         ) : null}
       </div>
-    </div>
+    </motion.div>
   );
 }
 

src/features/marketplace/views/Browse.jsx

@@ -28,6 +28,7 @@ class Marketplace extends PureComponent {
       item: {},
       collection: false,
       filter: '',
+      type: 'all',
     };
     this.buttons = {
       uninstall: (
@@ -426,6 +427,35 @@ class Marketplace extends PureComponent {
             </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 ? (
@@ -455,7 +485,7 @@ class Marketplace extends PureComponent {
           )
         ) : (
           <Items
-            type={this.props.type}
+            type={this.state.type}
             items={this.state.items}
             collection={this.state.displayedCollection}
             onCollection={this.state.collection}

src/features/misc/views/Settings.jsx

@@ -90,7 +90,7 @@ const sections = [
 
 function Settings(props) {
   return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="settings" modalClose={props.modalClose}>
+    <Tabs setSubTab={props.setSubTab} changeTab={(type) => props.changeTab(type)} current="settings" modalClose={props.modalClose}>
       {sections.map(({ label, name, component: Component }) => (
         <div key={name} label={variables.getMessage(label)} name={name}>
           <Component />