Update custom avatar

apps/client/src/components/ui/custom-avatar.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Avatar } from "@mantine/core";
+import { getAvatarUrl } from "@/lib/config.ts";
+
+interface CustomAvatarProps {
+  avatarUrl: string;
+  name: string;
+  color?: string;
+  size?: string | number;
+  radius?: string | number;
+  variant?: string;
+  style?: any;
+  component?: any;
+}
+
+export const CustomAvatar = React.forwardRef<
+  HTMLInputElement,
+  CustomAvatarProps
+>(({ avatarUrl, name, ...props }: CustomAvatarProps, ref) => {
+  const avatarLink = getAvatarUrl(avatarUrl);
+
+  return (
+    <Avatar
+      ref={ref}
+      src={avatarLink}
+      name={name}
+      alt={name}
+      color="initials"
+      {...props}
+    />
+  );
+});

apps/client/src/components/ui/user-avatar.tsx

@@ -1,35 +0,0 @@
-import React, { useRef } from "react";
-import { Avatar } from "@mantine/core";
-import { getAvatarUrl } from "@/lib/config.ts";
-
-interface UserAvatarProps {
-  avatarUrl: string;
-  name: string;
-  color?: string;
-  size?: string | number;
-  radius?: string | number;
-  style?: any;
-  component?: any;
-}
-
-export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
-  ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
-    const avatar = getAvatarUrl(avatarUrl);
-
-    const getInitials = (name: string) => {
-      const names = name?.split(" ");
-      return names
-        ?.slice(0, 2)
-        .map((n) => n[0])
-        .join("");
-    };
-
-    return avatar ? (
-      <Avatar ref={ref} src={avatar} alt={name} radius="xl" {...props} />
-    ) : (
-      <Avatar ref={ref} {...props}>
-        {getInitials(name)}
-      </Avatar>
-    );
-  },
-);