Created select account input

moneymgr_web/src/widgets/forms/AccountInput.tsx

@@ -0,0 +1,50 @@
+import { MenuItem, Select, Typography } from "@mui/material";
+import { AccountIconWidget } from "../AccountIconWidget";
+import { useAccounts } from "../../hooks/AccountsListProvider";
+import { AmountWidget } from "../AmountWidget";
+
+export function AccountInput(p: {
+  value: number;
+  onChange: (value: number) => void;
+  label?: string;
+}): React.ReactElement {
+  const accounts = useAccounts();
+  let current = p.value;
+  if (!current && accounts.list.list.length > 0)
+    current = (accounts.list.default ?? accounts.list.list[0]).id;
+
+  return (
+    <Select
+      value={p.value}
+      label={p.label ?? ""}
+      onChange={(e) => p.onChange(Number(e.target.value))}
+      size="small"
+    >
+      {accounts.list.list.map((a) => (
+        <MenuItem value={a.id}>
+          <span
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              height: "100%",
+            }}
+          >
+            <AccountIconWidget account={a} />
+            <span
+              style={{
+                marginLeft: "1em",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <span>{a.name}</span>
+              <Typography variant="caption">
+                <AmountWidget amount={a.balance} />
+              </Typography>
+            </span>
+          </span>
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}