import { Head, Link } from '@inertiajs/react'; import { Search } from 'lucide-react'; import { useMemo, useState } from 'react'; import PortalLayout from '@/layouts/portal-layout'; interface Member { id: number; name: string; title: string | null; profession: string | null; membership_number: string | null; slug: string | null; institution_id: number | null; institution: { name: string; country: { name: string } | null; } | null; } function initials(name: string) { return name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase(); } export default function Directory({ members }: { members: Member[] }) { const [q, setQ] = useState(''); const filtered = useMemo(() => { const s = q.toLowerCase(); return members.filter((m) => m.name.toLowerCase().includes(s) || m.profession?.toLowerCase().includes(s) || m.institution?.name.toLowerCase().includes(s) || m.institution?.country?.name.toLowerCase().includes(s) ); }, [q, members]); return ( <>

Member Directory

{members.length} individual members across Africa

setQ(e.target.value)} placeholder="Search by name, profession, institution…" className="w-full rounded-lg border border-border bg-white pl-9 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#0A2647]/20" />
{filtered.length === 0 ? (

No members match your search.

) : (
{filtered.map((m) => ( ))}
Member Profession Institution Country
{initials(m.name)}
{m.slug ? ( {[m.title, m.name].filter(Boolean).join(' ')} ) : ( {[m.title, m.name].filter(Boolean).join(' ')} )}
{m.profession ?? '—'} {m.institution?.name ?? '—'} {m.institution?.country?.name ?? '—'}
)}
); } Directory.layout = (page: React.ReactNode) => {page};