# Team Directory Searchable-looking member directory with roles, status, and actions. - Category: Application - Tier: Free - Page: /blocks/team_directory - Source attribution: blocks.so - License: MIT OR Apache-2.0 (block source) ## Source Free block source is dual licensed under MIT OR Apache-2.0. Use of the Proa framework is governed separately under AGPL-3.0-only or a commercial Proa license. ### team_directory.rs ```rust // SPDX-FileCopyrightText: 2026 Proa Labs, Inc. // SPDX-License-Identifier: (MIT OR Apache-2.0) AND MIT //! Provenance: adapted from `content/components/grid-list/grid-list-02.tsx` in //! https://github.com/ephraimduncan/blocks at commit //! fe4305a1147355f5cd1ca9cb03b6fa88f013bd6a. MIT License, Copyright (c) 2025 //! Ephraim Duncan; see the upstream `LICENSE.md`. use proa_macros::html_sync; use proa_ui::{ Avatar, AvatarFallback, AvatarImage, AvatarShape, AvatarSize, Badge, BadgeVariant, Button, ButtonSize, ButtonVariant, Card, Input, InputType, }; /// Availability, as one value rather than a loose dot-colour/label pair: the two /// always move together, and splitting them lets a card claim "Available" under /// an amber dot. #[derive(Clone, Copy)] enum Presence { Available, Away, Offline, } impl Presence { fn dot(self) -> &'static str { match self { Self::Available => "bg-emerald-500", Self::Away => "bg-amber-500", Self::Offline => "bg-zinc-400", } } fn label(self) -> &'static str { match self { Self::Available => "Available", Self::Away => "Away", Self::Offline => "Offline", } } } struct Member { initials: &'static str, /// Avatar tint. Written out in full rather than composed from a colour name /// because Tailwind scans source for literal class names. avatar: &'static str, presence: Presence, name: &'static str, role: &'static str, team: &'static str, city: &'static str, } const MEMBERS: &[Member] = &[ Member { initials: "AM", avatar: "bg-violet-500/15 font-semibold text-violet-700 dark:text-violet-300", presence: Presence::Available, name: "Avery Morgan", role: "VP of Product", team: "Product", city: "San Francisco", }, Member { initials: "JL", avatar: "bg-sky-500/15 font-semibold text-sky-700 dark:text-sky-300", presence: Presence::Available, name: "Jordan Lee", role: "Staff Engineer", team: "Engineering", city: "New York", }, Member { initials: "SK", avatar: "bg-amber-500/15 font-semibold text-amber-700 dark:text-amber-300", presence: Presence::Away, name: "Samira Khan", role: "Product Designer", team: "Design", city: "London", }, Member { initials: "RC", avatar: "bg-emerald-500/15 font-semibold text-emerald-700 dark:text-emerald-300", presence: Presence::Available, name: "Rowan Chen", role: "Engineering Manager", team: "Engineering", city: "Toronto", }, Member { initials: "MP", avatar: "bg-rose-500/15 font-semibold text-rose-700 dark:text-rose-300", presence: Presence::Offline, name: "Mina Patel", role: "Design Engineer", team: "Design", city: "Berlin", }, Member { initials: "DT", avatar: "bg-fuchsia-500/15 font-semibold text-fuchsia-700 dark:text-fuchsia-300", presence: Presence::Available, name: "Dario Torres", role: "Developer Advocate", team: "Product", city: "Austin", }, ]; const ROLE_FILTERS: &[&str] = &["Design", "Engineering", "Product"]; /// Copy-paste-ready block composition. pub struct TeamDirectoryBlock; impl proa_core::WebRenderSync for TeamDirectoryBlock { fn render( self, cx: &mut proa_core::WebContext, ) -> Result<(), proa_core::WriteError> { html_sync! {

"People"

{Badge { variant: BadgeVariant::Secondary, class: Some("rounded-full px-2.5 shadow-none"), children: Some("24 members"), }}

"Everyone with access to the Proa workspace."

{Input { input_type: InputType::Search, placeholder: Some("Search people..."), aria_label: Some("Search team members"), class: Some("pl-9"), ..Input::new() }}
{Button { size: Some(ButtonSize::Sm), children: Some("Invite member"), ..Default::default() }}
{Button { size: Some(ButtonSize::Sm), children: Some("All"), ..Default::default() }} {for filter in ROLE_FILTERS { html_sync! { {Button { size: Some(ButtonSize::Sm), variant: Some(ButtonVariant::Outline), children: Some(*filter), ..Default::default() }} } }}
    {for member in MEMBERS { html_sync! {
  • {Card { class: Some("group relative h-full py-0 shadow-xs transition-[border-color,box-shadow,transform,translate] duration-200 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md dark:border-white/10"), children: Some(html_sync! {
    {Avatar { size: AvatarSize::Lg, shape: AvatarShape::Circle, class: None, image: None::, fallback: Some(AvatarFallback { size: AvatarSize::Lg, class: Some(member.avatar), children: Some(member.initials), }), }} {member.presence.label()}
    {member.name}

    {member.role}

    {Badge { variant: BadgeVariant::Outline, class: Some("font-normal"), children: Some(member.team) }} {member.city}
    }), }}
    • } }}

"Showing 6 of 24 members"

{Button { size: Some(ButtonSize::Sm), variant: Some(ButtonVariant::Outline), children: Some("Previous"), ..Default::default() }} {Button { size: Some(ButtonSize::Sm), variant: Some(ButtonVariant::Outline), children: Some("Next"), ..Default::default() }}
} .render(cx) } } ```