Show couple state in basic family tree

geneit_app/src/widgets/BasicFamilyTree.tsx

@@ -7,6 +7,7 @@ import { MemberPhoto } from "./MemberPhoto";
 import { Member, fmtDate } from "../api/MemberApi";
 import Icon from "@mdi/react";
 import { mdiBabyCarriage, mdiCross } from "@mdi/js";
+import { Couple } from "../api/CoupleApi";
 
 export function BasicFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -46,7 +47,7 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
                 marginLeft: "20px",
               }}
             >
-              <BasicFamilyMemberItem member={c.member} />
+              <BasicFamilyMemberItem member={c.member} couple={c.couple} />
             </span>
           ))}
         </div>
@@ -62,6 +63,7 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
 function BasicFamilyMemberItem(p: {
   member: Member;
   primary?: boolean;
+  couple?: Couple;
 }): React.ReactElement {
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
@@ -69,7 +71,7 @@ function BasicFamilyMemberItem(p: {
       <span style={{ width: "10px" }}></span>
       <div style={{ display: "flex", flexDirection: "column" }}>
         <span style={{ fontWeight: p.primary ? "bold" : "unset" }}>
-          {p.member.fullName}{" "}
+          {p.member.fullName} {p.couple?.state && `(${p.couple.stateFr}) `}
           {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
         </span>
         <span style={{ display: "inline-flex", alignItems: "center" }}>