​
Overview

The <OrganizationList /> component displays a list of organizations that the user belongs to. It shows organization avatars, names, user roles, and includes a “Create Organization” action button.

​
Basic Usage

import { OrganizationList } from '@snipextt/wacht'

function OrganizationsPage() {
  const organizations = [
    { id: '1', name: 'Acme Corp', role: 'Admin', imageUrl: '/acme-logo.png' },
    { id: '2', name: 'Beta Inc', role: 'Member', imageUrl: '/beta-logo.png' }
  ]
  const [activeOrg, setActiveOrg] = useState('1')

  return (
    <OrganizationList
      organizations={organizations}
      activeOrg={activeOrg}
      setActiveOrg={setActiveOrg}
    />
  )
}

​
Props

​
organizations
Organization[]
required
Array of organization objects to display in the list.
​
activeOrg
string
required
ID of the currently active/selected organization.
​
setActiveOrg
function
required
Function to set the active organization ID when an organization is selected.

​
Organization Object

​
id
string
required
Unique identifier for the organization.
​
name
string
required
Display name of the organization.
​
role
string
required
User’s role within the organization (e.g., “Admin”, “Member”, “Owner”).
​
imageUrl
string
URL to the organization’s logo/avatar image.

​
What it includes

​
Organization Display

  • Organization Avatar - Shows organization logo or generated initials
  • Organization Name - Display name of the organization
  • User Role - Shows the user’s role within each organization
  • Active Indicator - Visual indicator for the currently selected organization

​
Interactive Features

  • Organization Selection - Click to set active organization
  • Create Organization Button - Action button to create new organizations
  • Hover States - Visual feedback on organization items
  • Responsive Design - Adapts to different screen sizes

​
Visual Features

  • Avatar Fallback - Shows organization initials if no logo is provided
  • Smooth Transitions - Animated hover and selection states
  • Mobile Breakpoints - Responsive design for mobile devices