"use client";

import * as React from "react";

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

export type UserAvatarSize = "sm" | "md" | "lg" | "xl";
export type UserAvatarStatus = "online" | "offline";

export interface UserAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
  src?: string;
  alt?: string;
  name?: string;
  size?: UserAvatarSize;
  status?: UserAvatarStatus;
  showStatus?: boolean;
}

const sizeStyles: Record<UserAvatarSize, string> = {
  sm: "h-8 w-8 text-xs",
  md: "h-10 w-10 text-sm",
  lg: "h-14 w-14 text-base",
  xl: "h-16 w-16 text-lg",
};

const statusSizeStyles: Record<UserAvatarSize, string> = {
  sm: "h-2.5 w-2.5",
  md: "h-3 w-3",
  lg: "h-3.5 w-3.5",
  xl: "h-4 w-4",
};

const getInitials = (name?: string, alt?: string) => {
  const source = name ?? alt ?? "";
  const words = source.trim().split(" ").filter(Boolean);
  if (words.length === 0) return "";
  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
  return `${words[0][0]}${words[1][0]}`.toUpperCase();
};

export const UserAvatar = React.forwardRef<HTMLDivElement, UserAvatarProps>(
  (
    {
      className,
      src,
      alt,
      name,
      size = "md",
      status = "online",
      showStatus = true,
      ...props
    },
    ref
  ) => {
    const initials = getInitials(name, alt);

    return (
      <div
        ref={ref}
        className={cn("relative inline-flex", className)}
        {...props}
      >
        <div
          className={cn(
            "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-muted text-foreground",
            sizeStyles[size]
          )}
          aria-label={name ?? alt ?? "User avatar"}
        >
          {src ? (
            <img
              src={src}
              alt={alt ?? name ?? "User avatar"}
              className="h-full w-full object-cover"
            />
          ) : (
            <span className="font-semibold">{initials}</span>
          )}
        </div>
        {showStatus ? (
          <span
            className={cn(
              "absolute bottom-0 right-0 rounded-full border border-border",
              statusSizeStyles[size],
              status === "online"
                ? "bg-card ring-2 ring-ring"
                : "bg-muted"
            )}
            aria-label={status}
            role="status"
          />
        ) : null}
      </div>
    );
  }
);

UserAvatar.displayName = "UserAvatar";
User Avatar

Dependencies

Files

Installation
