Members

Part of @cobuntu/embed-react: headless, data via props, links through your router.

The directory

"use client";
import { useState } from "react";
import Link from "next/link";
import { MemberDirectory, type RenderLink } from "@cobuntu/embed-react";
import type { DirectoryResult } from "@cobuntu/embed";
 
const renderLink: RenderLink = ({ href, className, children, ...rest }) => (
  <Link href={href} className={className} {...rest}>{children}</Link>
);
 
export function Directory({ initial }: { initial: DirectoryResult }) {
  const [members, setMembers] = useState(initial.members);
  const [cursor, setCursor] = useState(initial.nextCursor);
  const [busy, setBusy] = useState(false);
 
  async function loadMore() {
    setBusy(true);
    const r = await fetch(`/api/community/directory?cursor=${cursor}`); // your own route
    const d = await r.json();
    setMembers((m) => [...m, ...d.members]);
    setCursor(d.nextCursor);
    setBusy(false);
  }
 
  return (
    <MemberDirectory
      members={members}
      hasMore={!!cursor}
      onLoadMore={loadMore}
      loadingMore={busy}
      profileHref={(m) => `/community/${m.usertag}`}
      renderLink={renderLink}
    />
  );
}

What it does, out of the box:

• Sorted by name, accent-aware (localeCompare, base sensitivity).
• Search across the whole profile (case- and accent-insensitive, every term must match): name, @handle, signature, bio, role, tier, location, languages and notes. Every word must match somewhere, so "marketing portuguese" finds someone who does marketing and speaks Portuguese.
• Facet filters behind a Filters button: type, tier, place, languages, notes. OR within a facet ("Porto or Lisbon"), AND across facets. A facet is only offered when it has more than one option. Every option shows how many people it would leave.
• The contact peek: tapping a card opens a dialog with the bio, notes, links and details, and a Profile link. Escape, the backdrop and Close dismiss it.
• Load more while hasMore is true.

MemberDirectory props

The profile

import { MemberProfile } from "@cobuntu/embed-react";
 
<MemberProfile
  member={member}                         // MemberProfile from cobuntu.me.member(handle)
  renderLink={renderLink}
  eventHref={(e) => `/events/${e.slug}`}
/>

The avatar sits beside the name, handle, pronouns, signature, bio and link pills; the action row runs beneath at full width; then the tabs. The Events tab lists the events the member hosts, or an empty state.

The gate

When the API answers 401 (signed out) or 403 MEMBERS_ONLY (signed in, not a member), render the gate instead:

<MembersGate reason="signed-out" signInHref="/login?next=/community" joinHref="/join" renderLink={renderLink} />
<MembersGate reason="not-member" joinHref="/join" renderLink={renderLink} />

Smaller pieces

MemberCard, MemberFilterBar and MemberContactPeek are exported for custom layouts. The pure helpers behind the directory are too: filterMembersBySearch, buildMemberFacets, facetsFromServer, memberPassesFilters, toMemberFilters, sortMembersByName, normalizeProfileLinks, getSocialNetwork.

Class map

See the class map conventions.

Directory

Filter bar

Card

Peek

Profile

Gate