User Avatar

1"use client"
2 
3import {
4  type UsernameAuthClient,
5  useAuth,
6  useSession
7} from "@better-auth-ui/react"
8import type { User } from "better-auth"
9import { User2 } from "lucide-react"
10import type { ReactNode } from "react"
11 
12import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
13import { Skeleton } from "@/components/ui/skeleton"
14import { cn } from "@/lib/utils"
15 
16export type UserAvatarProps = {
17  className?: string
18  fallback?: ReactNode
19  isPending?: boolean
20  /** @remarks `User` */
21  user?: User & { username?: string | null; displayUsername?: string | null }
22}
23 
24/**
25 * Display a user's avatar using session information or an explicit user prop.
26 *
27 * Renders a circular avatar that shows the user's image when available, a fallback node if provided, or the user's first two initials; while the session is loading (or when `isPending` is true) and no `user` prop is supplied, renders a skeleton placeholder.
28 *
29 * @param className - Additional CSS classes applied to the avatar container
30 * @param user - Optional user object to display instead of the session user
31 * @param isPending - When true, treat the component as loading and show the skeleton if no `user` is provided
32 * @param fallback - Node to render inside the avatar fallback area before initials or the default icon
33 * @returns The avatar element to render (JSX)
34 */
35export function UserAvatar({
36  className,
37  user,
38  isPending,
39  fallback
40}: UserAvatarProps) {
41  const { authClient } = useAuth()
42  const { data: session, isPending: sessionPending } = useSession(
43    authClient as UsernameAuthClient,
44    { enabled: !user && !isPending }
45  )
46 
47  if ((isPending || sessionPending) && !user) {
48    return <Skeleton className={cn("size-8 rounded-full", className)} />
49  }
50 
51  const resolvedUser = user ?? session?.user
52 
53  const initials = (
54    resolvedUser?.username ||
55    resolvedUser?.name ||
56    resolvedUser?.email
57  )
58    ?.slice(0, 2)
59    .toUpperCase()
60 
61  return (
62    <Avatar
63      className={cn(
64        "size-8 bg-muted text-foreground text-sm rounded-full",
65        className
66      )}
67    >
68      <AvatarImage
69        src={resolvedUser?.image ?? undefined}
70        alt={
71          resolvedUser?.displayUsername ||
72          resolvedUser?.name ||
73          resolvedUser?.email
74        }
75      />
76 
77      <AvatarFallback className="text-muted-foreground!">
78        {fallback || initials || <User2 className="size-4" />}
79      </AvatarFallback>
80    </Avatar>
81  )
82}