refactor: move search away from marketplace

src/components/Elements/MainModal/Main.jsx

@@ -1,6 +1,13 @@
 import variables from 'config/variables';
 import { Suspense, lazy, useState, memo } from 'react';
-import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension, MdClose } from 'react-icons/md';
+import {
+  MdSettings,
+  MdOutlineShoppingBasket,
+  MdOutlineExtension,
+  MdClose,
+  MdSearch,
+  MdOutlineKeyboardArrowRight,
+} from 'react-icons/md';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from 'components/Elements';
 
@@ -152,7 +159,7 @@ let tabs = [
 
 function MainModal({ modalClose }) {
   let [activeTab, setActiveTab] = useState(tabs[0].id);
-  let [subTab, setSubTab] = useState("");
+  let [subTab, setSubTab] = useState('');
   let [direction, setDirection] = useState(1);
 
   const variants = {
@@ -188,6 +195,7 @@ function MainModal({ modalClose }) {
 
     setDirection(newIndex > currentIndex ? 1 : -1);
     setActiveTab(type);
+    setSubTab('');
   };
 
   const renderTab = () => {
@@ -204,13 +212,44 @@ function MainModal({ modalClose }) {
   return (
     <>
       <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' }}
-          >
+        <div className="flex flex-row gap-5 p-5 items-center justify-between">
+          <div className="flex flex-row gap-5 items-center">
+            {navbarLogo}
+            <div className="flex flex-row items-center gap-2">
+              <span className="text-xl capitalize tracking-normal">{activeTab}</span>
+              {subTab !== '' && (
+                <>
+                  <MdOutlineKeyboardArrowRight />
+                  <span className="text-xl capitalize tracking-normal">{subTab}</span>
+                </>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-row gap-5">
+            <AnimatePresence>
+              {activeTab === 'marketplace' && (
+                <motion.div
+                  initial={{ opacity: 0, y: '-100%' }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: '-100%' }}
+                >
+                  <form className="max-w-md mx-auto relative mr-10">
+                    <input
+                      label={variables.getMessage('widgets.search')}
+                      placeholder={variables.getMessage('widgets.search')}
+                      name="filter"
+                      id="filter"
+                      //value={this.state.filter}
+                      //onChange={(event) => this.setState({ filter: event.target.value })}
+                      className="h-[40px] block w-full px-4 ps-10 text-sm text-gray-900 border border-[#484848] rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-white/5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-neutral-100"
+                    />
+                    <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                      <MdSearch />
+                    </div>
+                  </form>
+                </motion.div>
+              )}
+            </AnimatePresence>
             <div className="flex space-x-1">
               {tabs.map((tab) => (
                 <button
@@ -218,7 +257,7 @@ function MainModal({ modalClose }) {
                   onClick={() => changeTab(tab.id)}
                   className={`${
                     activeTab === tab.id ? '' : 'hover:text-white/60'
-                  } flex flex-row gap-5 items-center relative rounded-sm px-3 py-1.5 text-sm text-white outline-sky-400 transition focus-visible:outline-2`}
+                  } flex flex-row gap-2 items-center relative rounded-sm px-3 py-1.5 text-sm text-white outline-sky-400 transition focus-visible:outline-2`}
                   style={{
                     WebkitTapHighlightColor: 'transparent',
                   }}

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

@@ -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))

src/features/marketplace/views/Browse.jsx

@@ -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 ? (