Agent Directory

Not yet available

This component is planned but not yet published to the registry. The React install command below will not work until the component ships. The HTML preview shows the intended design.

A searchable directory of insurance agents with contact details and specialisations.

Preview · Agent Directory

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:360px">
  <input type="search" placeholder="Search agents..." />
  <div class="card" style="padding:0.875rem">
    <div style="display:flex;gap:0.75rem;align-items:center">
      <div style="width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--primary) 15%,transparent);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--primary);flex-shrink:0;font-size:0.875rem">SJ</div>
      <div><p style="margin:0;font-weight:500;font-size:0.875rem">Sarah Johnson</p><p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">Auto · Home · Life</p></div>
      <button class="outline small" style="margin-inline-start:auto">Contact</button>
    </div>
  </div>
</div>

React

// Coming soon — this component is not yet available in the registry.
// Track progress: https://github.com/your-org/primus-saas/issues

Angular

<primus-agent-directory [agents]="agents"></primus-agent-directory>

Props

Prop	Type	Default	Description
apiUrl	string	—	API base URL
agents	Agent[]	—	Agent list (Angular)

TypeScript interfaces

interface Agent {
  id:              string;
  name:            string;
  email:           string;
  phone?:          string;
  avatar?:         string;
  specializations: string[];
  rating?:         number;
  available?:      boolean;
}

Events

Event	Type	Description
onContact / (onContact)	(agent: Agent) => void	Contact clicked

Version history

See the Changelog for version history and breaking changes.