"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cva, type VariantProps } from "class-variance-authority"

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

const avatarVariants = cva(
  "relative flex shrink-0 overflow-hidden rounded-full",
  {
    variants: {
      size: {
        sm: "h-8 w-8",
        md: "h-10 w-10",
        lg: "h-14 w-14",
      },
    },
    defaultVariants: {
      size: "md",
    },
  }
)

const statusVariants = cva(
  "absolute bottom-0 right-0 rounded-full border-2 border-background",
  {
    variants: {
      status: {
        online: "bg-primary",
        away: "bg-secondary",
        busy: "bg-foreground",
        offline: "bg-muted",
      },
      size: {
        sm: "h-2.5 w-2.5",
        md: "h-3.5 w-3.5",
        lg: "h-4 w-4",
      },
    },
    defaultVariants: {
      status: "online",
      size: "md",
    },
  }
)

export interface StatusAvatarProps
  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
    VariantProps<typeof avatarVariants> {
  src?: string
  alt?: string
  fallback?: string
  status?: "online" | "away" | "busy" | "offline"
  showStatus?: boolean
}

const StatusAvatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  StatusAvatarProps
>(
  (
    {
      className,
      size,
      src,
      alt,
      fallback,
      status = "online",
      showStatus = true,
      ...props
    },
    ref
  ) => {
    const fallbackText = fallback ?? alt?.charAt(0) ?? ""

    return (
      <div className="relative inline-flex">
        <AvatarPrimitive.Root
          ref={ref}
          className={cn(avatarVariants({ size, className }))}
          {...props}
        >
          {src ? (
            <AvatarPrimitive.Image
              src={src}
              alt={alt}
              className="aspect-square h-full w-full object-cover"
            />
          ) : null}
          <AvatarPrimitive.Fallback
            className="flex h-full w-full items-center justify-center bg-muted text-sm font-medium text-muted-foreground"
            delayMs={200}
          >
            {fallbackText}
          </AvatarPrimitive.Fallback>
        </AvatarPrimitive.Root>
        {showStatus ? (
          <span className={cn(statusVariants({ status, size }))} />
        ) : null}
      </div>
    )
  }
)
StatusAvatar.displayName = "StatusAvatar"

export { StatusAvatar }
Status Avatar

Dependencies

Files

Installation
