defmodule PyrauiWeb.DocsLive.ConnectionsWidgetDocs do use PyrauiWeb, :html def render(assigns) do ~H"""

Connections Widget

Social-style connections list with avatars, status indicators, mutual counts, and custom actions.

Followers Snapshot

Showcase a curated set of followers with online presence, mutual connections, and a CTA slot.

Realtime presence
<:action>

Tips

  • Use type={:followers} for inbound requests and max_display to limit avatar density.
  • Mixing online and offline states keeps the panel lively. The component applies the status badge automatically.
  • Slot an :action button to funnel users into dedicated follower dialogs or modals. 

            <.connections_widget connections={@followers} current_user={@user_id} type={:followers} max_display={4}>
              <:action>
                <button class="rounded-lg border border-blue-200 px-4 py-2 text-sm">View All</button>
              </:action>
            </.connections_widget>

People You May Know

Highlight mutual connections and quick actions to send invites or dismiss suggestions.

Smart Suggestions
<:action>

Suggestion logic

Use the same component to showcase recommended experts or collaborators. Populate mutual_count to boost social proof, and flip is_connected to update button copy automatically.

Online suggestions surface with a rich avatar ring.
Pending invites disable the CTA so states stay consistent. 

            <.connections_widget connections={@suggestions} current_user={@user_id} type={:connections} max_display={5}>
              <:action>
                <button class="rounded-lg border border-emerald-200 px-4 py-2 text-sm">Refresh Suggestions</button>
              </:action>
            </.connections_widget>

Team Roster

Switch the widget to a :following context to spotlight internal teammates or cohort members.

Team Ops
<:action> 

            <.connections_widget connections={@team} current_user={@user_id} type={:following} max_display={6}>
      <:action>
                <button class="rounded-lg border border-purple-200 px-4 py-2 text-sm">Manage Roles</button>
      </:action>
    </.connections_widget>

Props

Drive the widget with a simple list of maps. Each map supports :name, :username, :mutual_count, :online, and more.

Prop Type Default Description
connections list [] List of connection maps (name, avatar, mutual_count, etc.)
current_user integer nil Current user's id, used to highlight owned connections.
type :followers | :following | :connections :followers Changes the copy and CTA defaults per use case.
max_display integer 5 Control how many avatars render before truncation.
size :sm | :md | :lg :md Adjust the avatar dimensions to match your layout density.
""" end end