Ready to implement family tree

geneit_app/src/routes/family/FamilyTreeRoute.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import { MemberInput } from "../../widgets/forms/MemberInput";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+
+export function FamilyTreeRoute(): React.ReactElement {
+  const n = useNavigate();
+
+  const family = useFamily();
+
+  const onMemberSelected = (id: number | undefined) => {
+    if (id) n(family.family.URL(`tree/${id}`));
+  };
+
+  return (
+    <div
+      style={{
+        flex: "1",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <div style={{ maxWidth: "450px", textAlign: "center" }}>
+        <p>
+          Veuillez sélectionner la personne à partir de laquelle vous souhaitez
+          constuire l'arbre généalogique de votre famille :
+        </p>
+
+        <MemberInput
+          editable={true}
+          onValueChange={onMemberSelected}
+          label={"Membre"}
+          filter={() => true}
+        />
+      </div>
+    </div>
+  );
+}