apps/web/components/ui/user-avatar.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

"use client";

import { useMemo } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

import { getAssetUrl } from "@karakeep/shared/utils/assetUtils";

interface UserAvatarProps {
  image?: string | null;
  name?: string | null;
  className?: string;
  imgClassName?: string;
  fallbackClassName?: string;
  fallback?: React.ReactNode;
}

const isExternalUrl = (value: string) =>
  value.startsWith("http://") || value.startsWith("https://");

export function UserAvatar({
  image,
  name,
  className,
  imgClassName,
  fallbackClassName,
  fallback,
}: UserAvatarProps) {
  const avatarUrl = useMemo(() => {
    if (!image) {
      return null;
    }
    return isExternalUrl(image) ? image : getAssetUrl(image);
  }, [image]);

  const fallbackContent = fallback ?? name?.charAt(0) ?? "U";

  return (
    <Avatar className={className}>
      {avatarUrl && (
        <AvatarImage
          src={avatarUrl}
          alt={name ?? "User"}
          className={cn("object-cover", imgClassName)}
        />
      )}
      <AvatarFallback className={cn("text-sm font-medium", fallbackClassName)}>
        {fallbackContent}
      </AvatarFallback>
    </Avatar>
  );
}