User Avatar

1import {
2	Avatar,
3	AvatarImage,
4	AvatarFallback,
5} from "@/registry/default/ui/avatar";
6import { getInitials } from "~/utils";
7import type { User } from "~/payload-types";
8import { useSession } from "~/auth/client";
9 
10export default function UserAvatar({
11	user,
12	showUsername = false,
13}: {
14	user?: User;
15	showUsername?: boolean;
16}) {
17	const { data: session } = useSession();
18 
19	const currentUser = user ?? session?.user;
20 
21	if (!currentUser) return <></>;
22 
23	if (showUsername) {
24		return (
25			<div className="grid place-items-center">
26				<Avatar>
27					<AvatarImage
28						src={currentUser.image ?? undefined}
29						alt="Profile image"
30					/>
31					<AvatarFallback>
32						{getInitials(currentUser.name, 2).toUpperCase()}
33					</AvatarFallback>
34				</Avatar>
35				<p>{currentUser.name}</p>
36			</div>
37		);
38	}
39 
40	return (
41		<Avatar>
42			<AvatarImage src={currentUser.image ?? undefined} alt="Profile image" />
43			<AvatarFallback>
44				{getInitials(currentUser.name, 2).toUpperCase()}
45			</AvatarFallback>
46		</Avatar>
47	);
48}