User View

1"use client"
2 
3import {
4  type UsernameAuthClient,
5  useAuth,
6  useSession
7} from "@better-auth-ui/react"
8import type { User } from "better-auth"
9 
10import { Skeleton } from "@/components/ui/skeleton"
11import { cn } from "@/lib/utils"
12import { UserAvatar } from "./user-avatar"
13 
14export type UserViewProps = {
15  className?: string
16  isPending?: boolean
17  /**
18   * When true, the subtitle line (email when name/username is shown) is hidden.
19   * @default false
20   */
21  hideSubtitle?: boolean
22  /** @remarks `User` */
23  user?: Partial<User> & {
24    username?: string | null
25    displayUsername?: string | null
26  }
27}
28 
29/**
30 * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional subtitle (email).
31 *
32 * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details
33 * @param className - Additional CSS classes applied to the outer container
34 * @param hideSubtitle - When true, omits the muted subtitle row under the primary label
35 * @param user - Optional user object to display; when omitted the current session user is used
36 * @returns A React element showing the user's avatar with their identifying information
37 */
38export function UserView({
39  className,
40  isPending,
41  hideSubtitle = false,
42  user
43}: UserViewProps) {
44  const { authClient } = useAuth()
45  const { data: session, isPending: sessionPending } = useSession(
46    authClient as UsernameAuthClient,
47    { enabled: !user && !isPending }
48  )
49 
50  const resolvedUser = user ?? session?.user
51 
52  if ((isPending || sessionPending) && !user) {
53    return (
54      <div className={cn("flex items-center gap-2 min-w-0", className)}>
55        <UserAvatar isPending />
56 
57        <div className="grid flex-1 gap-1 text-left text-sm">
58          <Skeleton className="h-4 w-24" />
59 
60          {!hideSubtitle && <Skeleton className="h-3 w-32" />}
61        </div>
62      </div>
63    )
64  }
65 
66  return (
67    <div className={cn("flex items-center gap-2 min-w-0", className)}>
68      <UserAvatar user={resolvedUser as User | undefined} />
69 
70      <div className="grid min-w-0 flex-1 text-left text-sm leading-tight">
71        <span className="truncate font-medium text-foreground">
72          {resolvedUser?.displayUsername ||
73            resolvedUser?.name ||
74            resolvedUser?.email}
75        </span>
76 
77        {!hideSubtitle &&
78          (resolvedUser?.displayUsername || resolvedUser?.name) && (
79// … truncated