Agent Directory

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

import { AgentDirectory } from 'primus-react-ui';

<AgentDirectory apiUrl="https://api.yourdomain.com" />

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.