WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

add card dummy component added

Browse Source
This commit was merged in pull request #821.
This commit is contained in:
victorAnumudu
2024-10-15 21:45:03 +01:00
parent 3267414454
commit 95a918e01d
8 changed files with 446 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/WalletBox.jsx
+17 -10
View File
@@ -1,7 +1,7 @@
import { useSelector } from "react-redux";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";
import WalletItemCardFamily from "./WalletItemCardFamily";
import WalletItemCardVirtual from './walletvirtual/WalletItemCardVirtual'
/**
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
@@ -9,25 +9,32 @@ import WalletItemCardFamily from "./WalletItemCardFamily";
export default function WalletBox({ wallet, payment, countries }) {
const { loading, data } = wallet;
const { userDetails } = useSelector((state) => state.userDetails);
const accountType = userDetails?.account_type === "FAMILY";
// const { userDetails } = useSelector((state) => state.userDetails);
// const accountType = userDetails?.account_type === "FAMILY";
// console.log('mumu', data)
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">
{/* xl:grid-cols[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] */}
{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 className="w-auto grid md:grid-cols-2 xxl:grid-cols-3 gap-4 md:gap-10">
{ data.length > 0 && data.map((item) => (
<div key={item.wallet_uid} className="w-full h-full">
{item.country ?
<WalletItemCard walletItem={item} payment={payment} countries={countries} />
:
<WalletItemCardVirtual walletItem={item} payment={payment} countries={countries} />
}
</div>
))}
</div>
)}
</div>
</div>
</div>
);