fix: show current tab

src/components/Elements/MainModal/Main.jsx

@@ -152,7 +152,8 @@ let tabs = [
 
 function MainModal({ modalClose }) {
   let [activeTab, setActiveTab] = useState(tabs[0].id);
-  const [direction, setDirection] = useState(1);
+  let [subTab, setSubTab] = useState("");
+  let [direction, setDirection] = useState(1);
 
   const variants = {
     enter: (direction) => ({
@@ -196,7 +197,7 @@ function MainModal({ modalClose }) {
       case 'marketplace':
         return <Marketplace modalClose={modalClose} />;
       default:
-        return <Settings modalClose={modalClose} />;
+        return <Settings setSubTab={setSubTab} modalClose={modalClose} />;
     }
   };
 
@@ -205,6 +206,7 @@ function MainModal({ modalClose }) {
       <div className="flex flex-col w-[100%] min-w-[100%]">
         <div className="flex flex-row gap-5 p-5 items-center">
           {navbarLogo}
+          <span className="text-xl capitalize tracking-normal">{subTab}</span>
           <div
             className="flex flex-row gap-5"
             style={{ marginLeft: 'auto', justifySelf: 'flex-end' }}

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -22,6 +22,7 @@ const Tabs = (props) => {
     }
     setCurrentTab(tab);
     setCurrentName(name);
+    props.setSubTab(name);
   };
 
   const hideReminder = () => {

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 />