"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type UserStatus = "online" | "away" | "offline";

export interface UserListAction {
  id: string;
  label: string;
  icon?: React.ReactNode;
  onClick?: () => void;
}

export interface UserListItem {
  id: string;
  name: string;
  role?: string;
  status?: UserStatus;
  avatarUrl?: string;
  avatarFallback?: string;
  actions?: UserListAction[];
}

export interface UserListProps {
  users: UserListItem[];
  className?: string;
}

const statusClasses: Record<UserStatus, string> = {
  online: "bg-primary",
  away: "bg-muted",
  offline: "bg-background",
};

export function UserList({ users, className }: UserListProps) {
  return (
    <div className={cn("space-y-4", className)}>
      {users.map((user) => {
        const fallbackInitial =
          user.avatarFallback ??
          (user.name.trim().length > 0 ? user.name.trim()[0] : "U");
        const status = user.status ?? "offline";

        return (
          <div
            key={user.id}
            className="flex items-center justify-between gap-4 rounded-2xl border border-border bg-card p-4"
          >
            <div className="flex items-center gap-4">
              <div className="relative">
                <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border border-border bg-muted">
                  {user.avatarUrl ? (
                    <img
                      src={user.avatarUrl}
                      alt={user.name}
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <span className="text-sm font-semibold text-muted-foreground">
                      {fallbackInitial}
                    </span>
                  )}
                </div>
                <span
                  className={cn(
                    "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border border-border",
                    statusClasses[status]
                  )}
                  aria-hidden="true"
                />
              </div>
              <div>
                <p className="text-sm font-semibold text-foreground">
                  {user.name}
                </p>
                <div className="flex items-center gap-2">
                  {user.role ? (
                    <span className="text-xs text-muted-foreground">
                      {user.role}
                    </span>
                  ) : null}
                  <span className="text-xs text-muted-foreground">
                    {status}
                  </span>
                </div>
              </div>
            </div>
            {user.actions && user.actions.length > 0 ? (
              <div className="flex items-center gap-2">
                {user.actions.map((action) => (
                  <button
                    key={action.id}
                    type="button"
                    onClick={action.onClick}
                    className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground transition hover:bg-card"
                    aria-label={action.label}
                  >
                    {action.icon}
                  </button>
                ))}
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}
User List

Dependencies

Files

Installation
