added family wallet page

2024-03-06 16:12:55 +01:00
parent cf8f32ed64
commit cf2df7529d
11 changed files with 338 additions and 203 deletions
@@ -0,0 +1,34 @@
+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 FamilyWalletBox({ 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 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>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}