Improve basic family tree

This commit is contained in:
Pierre HUBERT 2023-08-22 11:51:17 +02:00
parent 4eaaa11cc6
commit 365b71ba2d

View File

@ -6,7 +6,7 @@ import React from "react";
import { MemberPhoto } from "./MemberPhoto"; import { MemberPhoto } from "./MemberPhoto";
import { Member, fmtDate } from "../api/MemberApi"; import { Member, fmtDate } from "../api/MemberApi";
import Icon from "@mdi/react"; import Icon from "@mdi/react";
import { mdiCross } from "@mdi/js"; import { mdiBabyCarriage, mdiCross } from "@mdi/js";
export function BasicFamilyTree(p: { export function BasicFamilyTree(p: {
tree: FamilyTreeNode; tree: FamilyTreeNode;
@ -72,9 +72,23 @@ function BasicFamilyMemberItem(p: {
{p.member.fullName}{" "} {p.member.fullName}{" "}
{p.member?.dead && <Icon path={mdiCross} size={"1rem"} />} {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
</span> </span>
{(p.member.dateOfBirth || p.member.dateOfDeath) && <span style={{ display: "inline-flex", alignItems: "center" }}>
fmtDate(p.member.dateOfBirth) + {p.member.dateOfBirth && (
(p.member.dateOfDeath ? " - " + fmtDate(p.member.dateOfDeath) : "")} <>
<Icon path={mdiBabyCarriage} size={"1rem"} />{" "}
{fmtDate(p.member.dateOfBirth)}
</>
)}
<span style={{ width: "10px" }}></span>
{p.member.dateOfDeath && (
<>
<Icon path={mdiCross} size={"1rem"} />
{fmtDate(p.member.dateOfDeath)}
</>
)}
</span>
</div> </div>
</div> </div>
); );