own componetns

src/pages/Admin/Charity/Dashboard/LiqActions.tsx

@@ -0,0 +1,47 @@
+import { useModalContext } from "contexts/ModalContext";
+import type { BalanceMovement } from "types/aws";
+import { MoveFundForm } from "./MoveFundForm";
+
+interface Props {
+  endowId: number;
+  balance: number;
+  mov: BalanceMovement;
+}
+
+export function LiqActions(props: Props) {
+  const { showModal } = useModalContext();
+  return (
+    <div className="mt-8 flex justify-end gap-x-2">
+      <button
+        type="button"
+        onClick={() =>
+          showModal(MoveFundForm, {
+            type: "liq-cash",
+            balance: props.balance,
+            mov: props.mov,
+            endowId: props.endowId,
+            effect: "append",
+          })
+        }
+        className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
+      >
+        withdraw
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          showModal(MoveFundForm, {
+            type: "liq-lock",
+            balance: props.balance,
+            mov: props.mov,
+            endowId: props.endowId,
+            effect: "append",
+          })
+        }
+        className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
+      >
+        invest
+      </button>
+    </div>
+  );
+}

src/pages/Admin/Charity/Dashboard/Loaded.tsx

@@ -1,11 +1,11 @@
 import Icon from "components/Icon";
 import { Arrow, Content } from "components/Tooltip";
-import { useModalContext } from "contexts/ModalContext";
 import { humanize } from "helpers";
 import { useAdminContext } from "pages/Admin/Context";
 import type { BalanceMovement, EndowmentBalances } from "types/aws";
 import Figure from "./Figure";
-import { MoveFundForm } from "./MoveFundForm";
+import { LiqActions } from "./LiqActions";
+import { LockActions } from "./LockActions";
 import { Movements } from "./Movements";
 import { PayoutHistory } from "./PayoutHistory";
 import { Schedule } from "./Schedule";
@@ -17,7 +17,6 @@ export function Loaded({
 }: EndowmentBalances & { classes?: string }) {
   const { id } = useAdminContext();
   const period = monthPeriod();
-  const { showModal } = useModalContext();
 
   const mov = props.movementDetails ?? {
     "liq-cash": 0,
@@ -61,38 +60,7 @@ export function Loaded({
           icon={<Icon size={21} type="PiggyBank" strokeWidth={1.5} />}
           amount={`$ ${humanize(props.donationsBal - props.payoutsMade, 2)}`}
           actions={
-            <div className="mt-8 flex justify-end gap-x-2">
-              <button
-                type="button"
-                onClick={() =>
-                  showModal(MoveFundForm, {
-                    type: "liq-cash",
-                    balance: balances["liq-cash"],
-                    mov,
-                    endowId: id,
-                    effect: "append",
-                  })
-                }
-                className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
-              >
-                withdraw
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  showModal(MoveFundForm, {
-                    type: "liq-lock",
-                    balance: balances["liq-lock"],
-                    mov,
-                    endowId: id,
-                    effect: "append",
-                  })
-                }
-                className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
-              >
-                invest
-              </button>
-            </div>
+            <LiqActions endowId={id} mov={mov} balance={balances["liq-cash"]} />
           }
         />
         <Figure
@@ -114,23 +82,11 @@ export function Loaded({
           icon={<Icon type="Stocks" size={16} />}
           amount={`$ ${humanize(props.sustainabilityFundBal, 2)}`}
           actions={
-            <div className="mt-8 flex justify-end">
-              <button
-                type="button"
-                onClick={() =>
-                  showModal(MoveFundForm, {
-                    type: "lock-cash",
-                    balance: balances["lock-cash"],
-                    mov,
-                    endowId: id,
-                    effect: "append",
-                  })
-                }
-                className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
-              >
-                withdraw
-              </button>
-            </div>
+            <LockActions
+              balance={balances["lock-cash"]}
+              endowId={id}
+              mov={mov}
+            />
           }
         />
         <Figure

src/pages/Admin/Charity/Dashboard/LockActions.tsx

@@ -0,0 +1,32 @@
+import { useModalContext } from "contexts/ModalContext";
+import type { BalanceMovement } from "types/aws";
+import { MoveFundForm } from "./MoveFundForm";
+
+interface Props {
+  endowId: number;
+  balance: number;
+  mov: BalanceMovement;
+}
+
+export function LockActions(props: Props) {
+  const { showModal } = useModalContext();
+  return (
+    <div className="mt-8 flex justify-end">
+      <button
+        type="button"
+        onClick={() =>
+          showModal(MoveFundForm, {
+            type: "lock-cash",
+            balance: props.balance,
+            mov: props.mov,
+            endowId: props.endowId,
+            effect: "append",
+          })
+        }
+        className="text-xs uppercase bg-blue-d1 text-white px-2 py-1 rounded-sm font-heading hover:bg-blue"
+      >
+        withdraw
+      </button>
+    </div>
+  );
+}