feat(ui): utilize next/image for user avatars

Author: ABGEO

apps/ui/src/components/AccountDropdown/AccountDropdown.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { signOut, useSession } from 'next-auth/react';
+import Image from 'next/image';
 
 import { Avatar, Dropdown, Space, Spin } from 'antd';
 import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
@@ -29,9 +30,18 @@ function AccountDropdown() {
     <Dropdown menu={{ items }} trigger={['click']} placement="bottomRight">
       <Space className={classes.userWrapper}>
         <Avatar
-          icon={<UserOutlined />}
-          src={session?.user?.image}
-          alt={session?.user?.name ?? 'Default User Avatar'}
+          icon={
+            !session?.user?.image ? (
+              <UserOutlined />
+            ) : (
+              <Image
+                src={session?.user?.image}
+                alt={session?.user?.name ?? 'Default User Avatar'}
+                layout="fill"
+                objectFit="cover"
+              />
+            )
+          }
         />
         <span className={classes.userName}>{session?.user?.name}</span>
       </Space>

apps/ui/src/components/UserFollowEvents/UserFollowEvents.tsx

@@ -1,9 +1,11 @@
 'use client';
 
+import Image from 'next/image';
 import { useState } from 'react';
 
 import { Avatar, Table, Tag } from 'antd';
 import type { GetProp, TableProps } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 
 import type { ResponseEventWithUserReference } from '@follytics/sdk';
 
@@ -60,11 +62,26 @@ const columns: TableProps<ResponseEventWithUserReference>['columns'] = [
     title: 'Avatar',
     key: 'user',
     dataIndex: 'userAvatar',
-    render: (_, { user }) => (
-      <>
-        <Avatar src={user?.avatar} />
-      </>
-    ),
+    render: (_, { user }) => {
+      return (
+        <>
+          <Avatar
+            icon={
+              !user?.avatar ? (
+                <UserOutlined />
+              ) : (
+                <Image
+                  src={user?.avatar}
+                  alt={user?.name ?? 'Default User Avatar'}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              )
+            }
+          />
+        </>
+      );
+    },
   },
 ];