Reorganize team page by working group

src/components/MDX/TeamMember.tsx

@@ -23,13 +23,49 @@ interface TeamMemberProps {
   name: string;
   title: string;
   permalink: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   photo: string;
   twitter?: string;
   threads?: string;
   bsky?: string;
   github?: string;
   personal?: string;
+  // Comma-separated list of working groups. Suffix a group with `*` to mark
+  // that the member represents it on the Leadership Council, e.g. "Fiber*, DOM".
+  group?: string;
+}
+
+function GroupBadges({group}: {group: string}) {
+  const groups = group
+    .split(',')
+    .map((g) => g.trim())
+    .filter(Boolean);
+  if (groups.length === 0) {
+    return null;
+  }
+  return (
+    <div className="flex flex-row flex-wrap gap-2 my-3">
+      {groups.map((g) => {
+        const isLead = g.endsWith('*');
+        const label = isLead ? g.slice(0, -1).trim() : g;
+        return (
+          <span
+            key={g}
+            className="inline-flex items-center rounded-full bg-blue-10 dark:bg-gray-80 text-link dark:text-link-dark px-3 py-1 text-sm font-medium whitespace-nowrap">
+            {label}
+            {isLead && (
+              <span
+                className="ps-1 text-yellow-50"
+                aria-label="Leadership Council"
+                title="Leadership Council">
+                ★
+              </span>
+            )}
+          </span>
+        );
+      })}
+    </div>
+  );
 }
 
 // TODO: good alt text for images/links
@@ -44,12 +80,11 @@ export function TeamMember({
   threads,
   bsky,
   personal,
+  group,
 }: TeamMemberProps) {
-  if (name == null || title == null || permalink == null || children == null) {
+  if (name == null || title == null || permalink == null) {
     const identifier = name ?? title ?? permalink ?? 'unknown';
-    throw new Error(
-      `Expected name, title, permalink, and children for ${identifier}`
-    );
+    throw new Error(`Expected name, title, and permalink for ${identifier}`);
   }
   return (
     <div className="pb-6 sm:pb-10">
@@ -69,6 +104,7 @@ export function TeamMember({
             {name}
           </H3>
           {title && <div>{title}</div>}
+          {group && <GroupBadges group={group} />}
           {children}
           <div className="sm:flex sm:flex-row flex-wrap text-secondary dark:text-secondary-dark">
             {twitter && (