fn_registry/frontend/functions/ui/avatar.tsx

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "../core/cn"

const avatarVariants = cva(
  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground select-none",
  {
    variants: {
      size: {
        xs: "size-6 text-xs",
        sm: "size-8 text-sm",
        md: "size-10 text-base",
        lg: "size-12 text-lg",
        xl: "size-16 text-xl",
      },
    },
    defaultVariants: { size: "md" },
  }
)

interface AvatarProps
  extends React.ComponentPropsWithoutRef<"span">,
    VariantProps<typeof avatarVariants> {
  src?: string
  alt?: string
  fallback?: string
  initials?: string
}

function getInitials(name?: string): string {
  if (!name) return "?"
  const parts = name.trim().split(/\s+/)
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
}

const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
  ({ className, size, src, alt, fallback, initials, ...props }, ref) => {
    const [imgError, setImgError] = React.useState(false)
    const showImage = src && !imgError
    const displayInitials = initials ?? getInitials(fallback ?? alt)

    return (
      <span
        ref={ref}
        data-slot="avatar"
        className={cn(avatarVariants({ size }), className)}
        {...props}
      >
        {showImage ? (
          <img
            src={src}
            alt={alt ?? ""}
            className="aspect-square size-full object-cover"
            onError={() => setImgError(true)}
          />
        ) : (
          <span data-slot="avatar-fallback" aria-hidden="true">
            {displayInitials}
          </span>
        )}
      </span>
    )
  }
)
Avatar.displayName = "Avatar"

export { Avatar, avatarVariants }
export type { AvatarProps }