added family wallet redeem options

src/components/MyWallet/FamilyWalletBox.jsx

@@ -7,6 +7,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
 import SearchCom from "../Helpers/SearchCom";
 import { localImgLoad } from "../../lib";
 import background from "../../assets/images/bg-sky-blue.jpg";
+import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -23,21 +24,6 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
     const currentWalletSelected = data?.filter((item) => item.code === name);
   }
 
-  const [redeemData, setRedeemData] = useState({loading: true, data: []});
-
-  const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:[]}) // State to hold filter blog
-
-  const handleFilterRedeemData = ({target}) => {
-    // let filterWord = target.value
-    // let filteredData = []
-    // if(!filterWord){
-    //   filteredData = redeemData?.data?.redeemData
-    // }else{
-    //   filteredData = redeemData?.data?.redeemData?.filter(item => item.post_title.toLowerCase().startsWith(filterWord.toLowerCase()))
-    // }
-    // setFilteredRedeemData({value:target.value, data: filteredData})
-  }
-
   const image = selectedWallet.code
   ? `${selectedWallet.code.toLowerCase()}.svg`
   : "default.png";
@@ -91,25 +77,7 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
         </div>
       </div>
       <div className="w-full">
-        <div className="w-full sm:flex items-center gap-4">
-          <h1 className="text-2xl font-bold text-black dark:text-white">Redeem Options</h1>
-          <div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
-            <SearchCom 
-              placeholder='Search Blog Items...' 
-              value={filteredRedeemData.value}
-              handleSearch={handleFilterRedeemData}
-            />
-          </div>
-        </div>
-
-        {/* redeem options */}
-        <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
-          {[1,2,3,4,5,6,7].map(item => (
-            <div key={item} className="p-5 h-60 bg-white dark:bg-dark-white text-black dark:text-white rounded-2xl shadow-md hover:shadow-none transition-all duration-300">
-              Dummy
-            </div>
-          ))}
-        </div>
+        <FamilyWalletRedeemOptions />
       </div>
     </div>
   );