import { useState, useMemo } from “react”;
const familyData = {
id: “root”,
name: “Marie & Arthur Joseph Robbennolt”,
born: “1920 / 1917”,
deceased: true,
maiden: “Schwerzler”,
spouse: null,
generation: 0,
children: [
{
id: “janis”,
name: “Janis Jean (Jan) Fitzgerald”,
born: “1941”,
maiden: “Robbennolt”,
spouse: “Robert Fitzgerald”,
generation: 1,
children: [
{
id: “sean”,
name: “Sean Fitzgerald”,
born: “1966”,
spouse: “Karen Fitzgerald”,
generation: 2,
children: [],
},
{
id: “brian”,
name: “Brian Fitzgerald”,
born: “1969”,
spouse: “Jennifer Fitzgerald”,
generation: 2,
children: [
{ id: “audrey”, name: “Audrey Fitzgerald”, generation: 3, children: [] },
{ id: “blake”, name: “Blake Fitzgerald”, generation: 3, children: [] },
],
},
],
},
{
id: “bill”,
name: “Arthur William (Bill) Robbennolt”,
born: “1944”,
exSpouse: “Maritza Robbennolt”,
generation: 1,
children: [
{
id: “michele”,
name: “Michele Woods”,
born: “1967”,
maiden: “Robbennolt”,
spouse: “Neal Woods”,
exSpouse: “Todd Coombs”,
generation: 2,
children: [
{ id: “miranda”, name: “Miranda Combs”, born: “1997”, generation: 3, children: [] },
{ id: “peyton”, name: “Peyton Combs”, born: “1998”, generation: 3, children: [] },
{ id: “devin”, name: “Devin Combs”, born: “2002”, generation: 3, children: [] },
{ id: “ana”, name: “Ana Woods (step)”, born: “1995”, generation: 3, children: [] },
{ id: “amelia”, name: “Amelia Woods (step)”, born: “1998”, generation: 3, children: [] },
{ id: “abbey”, name: “Abbey Woods (step)”, born: “2001”, generation: 3, children: [] },
],
},
{
id: “jeremiah-r”,
name: “Jeremiah Robbennolt”,
born: “1975”,
spouse: “Michael”,
generation: 2,
children: [
{ id: “mia”, name: “Mia Robbennolt”, born: “2005”, generation: 3, children: [] },
{ id: “ava”, name: “Ava Robbennolt”, born: “2007”, generation: 3, children: [] },
],
},
{
id: “ben”,
name: “Benjamin (Ben) Robbennolt”,
born: “1976”,
spouse: “Rebecca Robbennolt”,
generation: 2,
children: [
{ id: “ellie”, name: “Ellie Rae Robbennolt”, born: “2009”, generation: 3, children: [] },
{ id: “porter”, name: “Porter Robbennolt”, born: “2010”, generation: 3, children: [] },
{ id: “korben”, name: “Korben Robbennolt”, born: “2016”, generation: 3, children: [] },
{ id: “truett”, name: “Truett Robbennolt”, born: “2020”, generation: 3, children: [] },
{ id: “jovi”, name: “Jovi Robbennolt”, born: “2022”, generation: 3, children: [] },
],
},
],
},
{
id: “tom”,
name: “Thomas Joseph (Tom) Robbennolt”,
born: “1948”,
deceased: true,
deceasedDate: “Feb 8, 2026”,
spouse: “Pam Robbennolt”,
exSpouse: “Donna Weins”,
generation: 1,
children: [
{
id: “josie”,
name: “Josie Scovill”,
born: “1970”,
maiden: “Robbennolt”,
spouse: “Steve Scovell”,
generation: 2,
children: [
{ id: “ian”, name: “Ian Scovell”, born: “1994”, generation: 3, children: [] },
{ id: “talon”, name: “Talon Scovell”, born: “1997”, generation: 3, children: [] },
],
},
{
id: “kelly”,
name: “Kelly Robbennolt”,
born: “1971”,
generation: 2,
children: [
{ id: “natasha”, name: “Natasha”, generation: 3, children: [] },
],
},
{
id: “jody”,
name: “Jody Robbennolt”,
born: “1972”,
generation: 2,
children: [],
},
{
id: “shauna”,
name: “Shauna Zalinyev”,
born: “1990”,
maiden: “Robbennolt”,
spouse: “Anton Zalinyev”,
generation: 2,
children: [],
},
],
},
{
id: “jola”,
name: “Jola Marie Robbennolt”,
born: “1952”,
spouse: “Allan Sullivan (Deceased)”,
generation: 1,
children: [
{
id: “jason”,
name: “Jason Sullivan”,
born: “1970”,
generation: 2,
children: [
{
id: “crystal”,
name: “Crystal Farley”,
born: “1992”,
maiden: “Sullivan”,
spouse: “Andrei Farley”,
generation: 3,
children: [
{ id: “jeremiah-f”, name: “Jeremiah Farley”, born: “2018”, generation: 4, children: [] },
{ id: “jamison”, name: “Jamison Farley”, born: “2025”, generation: 4, children: [] },
],
},
{
id: “jessica”,
name: “Jessica Sullivan”,
born: “1994”,
generation: 3,
children: [
{ id: “preston”, name: “Preston Hoerler”, born: “2019”, generation: 4, children: [] },
],
},
{ id: “jaxon”, name: “Jaxon Sullivan”, born: “2007”, generation: 3, children: [] },
],
},
{
id: “chad”,
name: “Chad Sullivan”,
born: “1972”,
spouse: “Laura (Farnham) Sullivan”,
generation: 2,
children: [
{
id: “ryan-s”,
name: “Ryan Sullivan”,
born: “1992”,
generation: 3,
children: [
{ id: “aaleigh”, name: “Aaleigh Sullivan”, born: “2019”, generation: 4, children: [] },
{ id: “samiah”, name: “Samiah Sullivan”, born: “2022”, deceased: true, generation: 4, children: [] },
{ id: “archer”, name: “Archer Sullivan”, born: “2023”, generation: 4, children: [] },
],
},
{
id: “nicki”,
name: “Niccele (Nicki) Winpigler”,
born: “1985”,
maiden: “Anderson”,
spouse: “Ryan Winpigler”,
note: “Stepdaughter”,
generation: 3,
children: [
{ id: “elleigh”, name: “Elleigh Winpigler”, born: “2015”, generation: 4, children: [] },
],
},
],
},
{
id: “amy”,
name: “Amy Christie”,
born: “1976”,
maiden: “Sullivan”,
spouse: “Shawn R Christie”,
generation: 2,
children: [
{ id: “zach”, name: “Zackeriah (Winston) Christie”, born: “2002”, generation: 3, children: [] },
],
},
{
id: “andrew”,
name: “Andrew Sullivan”,
born: “1976”,
spouse: “Karen Sullivan”,
exSpouse: “Melissa”,
generation: 2,
children: [
{ id: “krista”, name: “Krista Sullivan”, generation: 3, children: [] },
{
id: “erin-s”,
name: “Erin Sullivan”,
deceased: true,
generation: 3,
children: [
{ id: “atlas”, name: “Atlas Grant”, born: “2024”, generation: 4, children: [] },
],
},
{ id: “emma”, name: “Emma Sullivan”, born: “2001”, deceased: true, generation: 3, children: [] },
{ id: “conner”, name: “Conner Sullivan”, generation: 3, children: [] },
{ id: “logan”, name: “Logan Sullivan”, generation: 3, children: [] },
{ id: “savannah”, name: “Savannah Sullivan”, born: “2020”, generation: 3, children: [] },
{ id: “alexander”, name: “Alexander Sullivan”, born: “2024”, generation: 3, children: [] },
],
},
],
},
{
id: “scott”,
name: “Scott Francis Robbennolt”,
born: “1955”,
deceased: true,
spouse: “Deb (Reiger) Robbennolt”,
generation: 1,
children: [
{
id: “keith”,
name: “Keith Robbennolt”,
born: “1975”,
spouse: “Shawna”,
generation: 2,
children: [
{ id: “vincent”, name: “Vincent Robbennolt”, born: “2006”, generation: 3, children: [] },
{ id: “isaac”, name: “Isaac Robbennolt”, born: “2009”, generation: 3, children: [] },
{ id: “dylan”, name: “Dylan Robbennolt”, born: “2010”, generation: 3, children: [] },
],
},
],
},
{
id: “kevin”,
name: “Kevin Lynn Robbennolt”,
born: “1956”,
spouse: “Kim (Koch) Robbennolt”,
generation: 1,
children: [
{
id: “dusty”,
name: “Dustin (Dusty) Robbennolt”,
born: “1979”,
spouse: “Gretchen (Lottman) Robbennolt”,
generation: 2,
children: [
{ id: “harry”, name: “Harry Robbennolt”, born: “2020”, generation: 3, children: [] },
{ id: “parker”, name: “Parker Robbennolt”, born: “2022”, generation: 3, children: [] },
],
},
{
id: “jenna”,
name: “Jenna Schuettpelz”,
born: “1984”,
maiden: “Robbennolt”,
spouse: “Ryan Schuettpelz”,
generation: 2,
children: [
{ id: “rooney”, name: “Rooney Schuettpelz”, born: “2018”, generation: 3, children: [] },
{ id: “jet”, name: “Jet Schuettpelz”, born: “2021”, generation: 3, children: [] },
],
},
],
},
{
id: “kathy”,
name: “Kathryn Sue (Kathy) Croucher”,
born: “1959”,
maiden: “Robbennolt”,
exSpouse: “Brad Croucher”,
generation: 1,
children: [
{
id: “cory”,
name: “Cory Croucher”,
born: “1990”,
generation: 2,
children: [
{ id: “bryxston”, name: “Bryxston Croucher”, born: “2014”, generation: 3, children: [] },
{ id: “stryker”, name: “Stryker Croucher”, born: “2017”, generation: 3, children: [] },
{ id: “crixus”, name: “Crixus Croucher”, born: “2019”, generation: 3, children: [] },
],
},
{
id: “casey”,
name: “Casey Croucher”,
born: “1992”,
generation: 2,
children: [
{ id: “marceline”, name: “Marceline Croucher”, born: “2023”, generation: 3, children: [] },
{ id: “violet”, name: “Violet Croucher”, born: “2023”, deceased: true, generation: 3, children: [] },
{ id: “daisy”, name: “Daisy Croucher”, born: “2025”, generation: 3, children: [] },
],
},
{
id: “erin-c”,
name: “Erin Croucher”,
born: “1996”,
generation: 2,
children: [],
},
{
id: “emily”,
name: “Emily Croucher”,
born: “1997”,
generation: 2,
children: [
{ id: “elijah”, name: “Elijah Dragon”, born: “2019”, generation: 3, children: [] },
],
},
],
},
{
id: “mitch”,
name: “Gregory Mitchell (Mitch) Robbennolt”,
born: “1962”,
deceased: true,
generation: 1,
children: [
{
id: “monica”,
name: “Monica Robbennolt”,
born: “1995”,
generation: 2,
children: [],
},
],
},
],
};
const GEN_COLORS = [
{ bg: “#1a1a2e”, accent: “#e2c27d”, text: “#f5f0e8”, label: “Founders” },
{ bg: “#2d1f3d”, accent: “#c9a0dc”, text: “#f0e6f6”, label: “Children” },
{ bg: “#1f2d3d”, accent: “#7ec8c8”, text: “#e6f3f3”, label: “Grandchildren” },
{ bg: “#2d3a1f”, accent: “#b5cc7a”, text: “#eef2e4”, label: “Great Grandchildren” },
{ bg: “#3d2d1f”, accent: “#e8a87c”, text: “#f6ece4”, label: “Great Great Grandchildren” },
];
function countDescendants(node) {
if (!node.children || node.children.length === 0) return 0;
return node.children.reduce((sum, c) => sum + 1 + countDescendants(c), 0);
}
function flattenTree(node, arr = []) {
arr.push(node);
if (node.children) node.children.forEach((c) => flattenTree(c, arr));
return arr;
}
function PersonCard({ person, expanded, onToggle, depth, searchTerm }) {
const gen = Math.min(person.generation, GEN_COLORS.length – 1);
const color = GEN_COLORS[gen];
const hasChildren = person.children && person.children.length > 0;
const descCount = countDescendants(person);
const isMatch =
searchTerm &&
person.name.toLowerCase().includes(searchTerm.toLowerCase());
return (
{/* Generation accent bar */}
{/* Expand/collapse icon */}
{hasChildren && (
▶
)}
{!hasChildren && }
{/* Person info */}
{person.name}
{person.deceased && (
✝{person.deceasedDate ? ` ${person.deceasedDate}` : “”}
)}
{person.born && (
b. {person.born}
)}
{person.spouse && (
♥ {person.spouse}
)}
{person.exSpouse && (
ex: {person.exSpouse}
)}
{person.maiden && (
née {person.maiden}
)}
{/* Descendant count badge */}
{hasChildren && (
{descCount}
)}
);
}
function TreeBranch({ node, depth = 0, expandedIds, toggleId, searchTerm, forceOpen }) {
const isExpanded = forceOpen || expandedIds.has(node.id);
const hasChildren = node.children && node.children.length > 0;
return (
depth={depth}
searchTerm={searchTerm}
/>
{hasChildren && isExpanded && (
paddingLeft: 12,
borderLeft: `1px dashed ${GEN_COLORS[Math.min(node.generation + 1, GEN_COLORS.length – 1)].accent}30`,
}}
>
{node.children.map((child) => (
))}
)}
);
}
export default function RobbennoltFamilyTree() {
const [expandedIds, setExpandedIds] = useState(new Set([“root”]));
const [searchTerm, setSearchTerm] = useState(“”);
const allPeople = useMemo(() => flattenTree(familyData), []);
const totalCount = allPeople.length;
const allIds = useMemo(
() => new Set(allPeople.map((p) => p.id)),
[allPeople]
);
const toggleId = (id) => {
setExpandedIds((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
};
const expandAll = () => setExpandedIds(new Set(allIds));
const collapseAll = () => setExpandedIds(new Set([“root”]));
const searchMatches = useMemo(() => {
if (!searchTerm) return 0;
return allPeople.filter((p) =>
p.name.toLowerCase().includes(searchTerm.toLowerCase())
).length;
}, [searchTerm, allPeople]);
const shouldForceOpen = searchTerm.length >= 2;
return (
{/* Header */}
The Family of
Marie & Arthur
Robbennolt
{totalCount} family members across 5 generations
{/* Legend */}
{GEN_COLORS.map((g, i) => (
{g.label}
))}
{/* Controls */}
setSearchTerm(e.target.value)}
style={{
flex: 1,
minWidth: 180,
padding: “8px 14px”,
borderRadius: 8,
border: “1px solid #e2c27d30”,
background: “#1a1a2e”,
color: “#f5f0e8”,
fontSize: 13,
outline: “none”,
fontFamily: “‘Source Sans 3’, sans-serif”,
}}
/>
{searchTerm.length >= 2 && (
{searchMatches} match{searchMatches !== 1 ? “es” : “”} found
)}
{/* Tree */}
Robbennolt Family Tree · Est. 1917
);
}
Last Updated on by Shawn Christie