refactor: use Avatar component in PeopleTable (#132)

frontend/src/components/common/Avatar/Avatar.interface.ts

@@ -1,7 +1,6 @@
 export interface AvatarProps {
   variant?: AvatarVariant;
-  firstName: string;
-  lastName: string;
+  initials: string;
   imageUrl?: string | undefined;
 }
 

frontend/src/components/common/Avatar/Avatar.tsx

@@ -13,21 +13,24 @@ const variants: {
   '320': 'w-80 h-80 text-5xl',
 };
 
-export const Avatar: React.FC<AvatarProps> = ({ firstName, lastName, imageUrl, variant = '40' }) => {
+export const Avatar: React.FC<AvatarProps> = ({ initials, imageUrl, variant = '40' }) => {
   const avatarClass = generateClassNames(
-    'rounded-full bg-blue-700 flex justify-center items-center',
+    'rounded-full bg-blue-700 flex justify-center items-center object-cover',
     variants[variant],
   );
 
   return (
     <div className={avatarClass}>
       {imageUrl ? (
-        <Image className="inline-block h-full w-full rounded-full" src={imageUrl} alt="User avatar" />
+        <Image
+          width={variant}
+          height={variant}
+          className="inline-block h-full w-full rounded-full"
+          src={imageUrl}
+          alt="User avatar"
+        />
       ) : (
-        <span className="text-white">
-          {firstName[0]}
-          {lastName[0]}
-        </span>
+        <span className="text-white">{initials}</span>
       )}
     </div>
   );

frontend/src/components/modules/Topbar/Topbar.tsx

@@ -45,7 +45,7 @@ export const Topbar = () => {
             <MenuButton className="bg-gray-800 focus:ring-offset-gray-800 relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2">
               <span className="absolute -inset-1.5" />
               <span className="sr-only">Open user menu</span>
-              <Avatar firstName={user.firstName} lastName={user.lastName} variant="40" />
+              <Avatar initials={`${user.firstName[0]}${user.lastName[0]}`} variant="40" />
             </MenuButton>
           </div>
           <Transition

frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx

@@ -1,5 +1,3 @@
-import Image from 'next/image';
-
 import { Typography } from '@app/components/common/Typography';
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
 import { FC, Fragment } from 'react';
@@ -8,6 +6,8 @@ import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon';
 import Link from 'next/link';
 import { employeeMenuOptions } from '../../People.utils';
 import { PeopleTableProps } from './PeopleTable.interface';
+import { Avatar } from '@app/components/common/Avatar';
+import { getInitials } from '@app/utils';
 import { formatDate } from '@app/utils';
 
 export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
@@ -48,16 +48,12 @@ export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
               {people?.map((person) => (
                 <tr key={person.id}>
                   <td className="flex whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
+                    <Avatar
+                      initials={getInitials(person.name)}
+                      variant="28"
+                      imageUrl="/images/avatar_placeholder.jpeg"
+                    />
                     <div className="flex items-center">
-                      <div className="h-8 w-8">
-                        <Image
-                          width={200}
-                          height={200}
-                          alt="User image"
-                          src="/images/avatar_placeholder.jpeg"
-                          className="h-8 w-8 rounded-full object-cover"
-                        />
-                      </div>
                       <div className="ml-4">
                         <Typography variant="body-s/medium">{person.name}</Typography>
                         <Typography variant="body-s/regular" className="text-navy-600">

frontend/src/components/pages/ProfileSetting/modules/PersonalDetails/PersonalDetails.tsx

@@ -32,7 +32,7 @@ export const PersonalDetails: React.FC<PersonalDetailsProps> = ({ data }) => {
             <Typography variant="body-m/medium" className="mb-2">
               Profile photo
             </Typography>
-            <Avatar firstName={firstName} lastName={lastName} imageUrl={photo} variant="72" />
+            <Avatar initials={`${firstName[0]}${lastName[0]}`} imageUrl={photo} variant="72" />
           </div>
           <div className="flex flex-row gap-4">
             <label className="flex h-11 w-11 items-center justify-center rounded-full border border-navy-300 bg-white text-navy-600 shadow-sm hover:bg-navy-100">

frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx

@@ -11,7 +11,7 @@ export const Header: React.FC<HeaderProps> = ({ user, currentLevel, nextLevel })
   return (
     <div className="flex w-full justify-between rounded-3xl bg-navy-200 px-6 py-9">
       <div className="flex items-center gap-6">
-        <Avatar firstName={firstName} lastName={lastName} imageUrl={photo} variant="100" />
+        <Avatar initials={`${firstName[0]}${lastName[0]}`} imageUrl={photo} variant="100" />
         <div className="flex flex-col justify-center gap-1">
           <Typography variant="head-m/medium">
             {firstName} {lastName}

frontend/src/utils/index.ts

@@ -2,4 +2,5 @@ export { generateClassNames } from './generateClassNames';
 export { mapKeysToCamelCase } from './mapKeysToCamelCase';
 export { readFile } from './file';
 export { getCroppedImg, createImage } from './canvas';
+export { getInitials } from './string';
 export { formatDate } from './date';

frontend/src/utils/string.ts

@@ -0,0 +1,6 @@
+export const getInitials = (text: string) => {
+  return text
+    .split(' ')
+    .map((word) => word[0])
+    .join('');
+};