victorAnumudu
35 lines
1.4 KiB
React
35 lines
1.4 KiB
React
import { useSelector } from "react-redux";
|
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|
import WalletItemCard from "./WalletItemCard";
|
|
import WalletItemCardFamily from "./WalletItemCardFamily";
|
|
|
|
/**
|
|
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
|
|
*/
|
|
export default function WalletBox({ wallet, payment, countries }) {
|
|
const { loading, data } = wallet;
|
|
|
|
const { userDetails } = useSelector((state) => state.userDetails);
|
|
const accountType = userDetails?.account_type === "FAMILY";
|
|
|
|
return (
|
|
<div className="my-wallet-wrapper w-full mb-10">
|
|
<div className="main-wrapper w-full">
|
|
<div className="balance-inquery w-auto grid md: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">
|
|
<LoadingSpinner size="16" color="sky-blue" />
|
|
</div>
|
|
) : (
|
|
data.length > 0 && data.map((item) => (
|
|
<div key={item.wallet_uid} className="w-full md:max-w-[450px] h-full mb-10 lg:mb-0">
|
|
<WalletItemCard walletItem={item} payment={payment} countries={countries} />
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|