added new family wallet page

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,6 +2,9 @@ import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 import WalletItemCardFamily from "./WalletItemCardFamily";
+import { useState } from "react";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import SearchCom from "../Helpers/SearchCom";
 
 /**
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -12,23 +15,96 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
   const { userDetails } = useSelector((state) => state.userDetails);
   const accountType = userDetails?.account_type === "FAMILY";
 
+  const [selectedWallet, setSelectedWallet] = useState(data[0])
+
+  const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
+    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})
+  }
+
+
+
   return (
-    <div className="my-wallet-wrapper w-full mb-10">
-      <div className="main-wrapper w-full">
-        <div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
-          {loading ? (
-            <div className="w-full h-full flex items-center justify-center bg-white">
-              <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
-            </div>
-          ) : (
-            data.length > 0 && data.map((item) => (
-              <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
-                <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
+    <div className="w-full">
+      <div className="my-wallet-wrapper w-full mb-10">
+        <div className="main-wrapper w-full">
+            {loading ? 
+              <div className="w-full h-full flex items-center justify-center bg-white">
+                <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
               </div>
-            ))
-          )}
+
+            : data.length > 0 ?
+                <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
+                  <div className="w-full mb-4 sm:mb-0">
+                    <div className="wal-selection text-black dark:text-white flex items-center gap-2">
+                      {data.length > 1 && data.map(item =>(
+                        <button className="py-0.5 px-1 mb-1 rounded-lg border border-orange-500" key={item.wallet_uid} name={item.code}>{item.code}</button>
+                      ))}
+                    </div>
+                    <div className="p-5 rounded-2xl bg-white-opacity h-60">
+                      {/* image */}
+                      <div className="w-full flex">
+                        <div className="w-32 h-32 rounded-full bg-blue-900 flex justify-center items-center">
+                          <div className="w-20 h-20 bg-slate-600 rounded-sm"></div>
+                        </div>
+                      </div>
+                      <p className="text-white py-2 text-base">Current Balance</p>
+                      <p className="text-white text-2xl">{PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code)}</p>
+                    </div>
+                  </div>
+                  <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px]">
+                  <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
+                  </div>
+                </div>
+            :
+            <div className="w-full h-32 flex justify-center items-center rounded-2xl bg-white">
+              <p>No Wallet Record Found</p>
+            </div>
+            }
+        </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>
       </div>
     </div>
   );
 }
+
+
+// data.length>0 && data.map((item) => (
+//   <div key={item.wallet_uid} className="w-full h-full mb-10 ">
+//     {/* <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} /> */}
+//   </div>
+// ))