Arjun Patel
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { useAvatarUrl } from '@/hooks/use-avatar-url';
|
|
|
|
interface HumanAvatarProps extends Omit<
|
|
React.ComponentProps<typeof Avatar>,
|
|
'children'
|
|
> {
|
|
/** Object id of the human's profile picture, if any. */
|
|
avatarObjectId?: string | null;
|
|
/** Initials rendered while loading or when no picture is set. */
|
|
initials: string;
|
|
/** Extra classes for the initials fallback. */
|
|
fallbackClassName?: string;
|
|
}
|
|
|
|
/**
|
|
* Renders a human's avatar: their profile picture when set (resolved to a
|
|
* signed URL), otherwise their initials. The fallback also shows while the
|
|
* image loads or if it fails, so this is a drop-in for the initials-only
|
|
* <Avatar> usages throughout the app.
|
|
*/
|
|
export function HumanAvatar({
|
|
avatarObjectId,
|
|
initials,
|
|
fallbackClassName,
|
|
...props
|
|
}: HumanAvatarProps) {
|
|
const url = useAvatarUrl(avatarObjectId);
|
|
return (
|
|
<Avatar {...props}>
|
|
{url && <AvatarImage src={url} alt={initials} />}
|
|
<AvatarFallback className={fallbackClassName}>{initials}</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|