30 lines
1.0 KiB
React
30 lines
1.0 KiB
React
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|
import WalletItemCard from "./WalletItemCard";
|
|
|
|
/**
|
|
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
|
|
*/
|
|
export default function WalletBox({ wallet, payment }) {
|
|
const { loading, data } = wallet;
|
|
|
|
return (
|
|
<div className="my-wallet-wrapper w-full mb-10">
|
|
<div className="main-wrapper w-full">
|
|
<div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
|
|
{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="lg:w-full h-full mb-10 lg:mb-0">
|
|
<WalletItemCard walletItem={item} payment={payment} />
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|