init

worklenz-frontend/src/components/CustomAvatar.tsx

@@ -0,0 +1,25 @@
+import Tooltip from 'antd/es/tooltip';
+import Avatar from 'antd/es/avatar';
+
+import { AvatarNamesMap } from '../shared/constants';
+
+const CustomAvatar = ({ avatarName, size = 32 }: { avatarName: string; size?: number }) => {
+  const avatarCharacter = avatarName[0].toUpperCase();
+
+  return (
+    <Tooltip title={avatarName}>
+      <Avatar
+        style={{
+          backgroundColor: AvatarNamesMap[avatarCharacter],
+          verticalAlign: 'middle',
+          width: size,
+          height: size,
+        }}
+      >
+        {avatarCharacter}
+      </Avatar>
+    </Tooltip>
+  );
+};
+
+export default CustomAvatar;