feat: avatar component

src/components/Avatar.test.tsx

@@ -0,0 +1,38 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
+import { render } from '@testing-library/react';
+import { Avatar, type IAvatar } from './Avatar';
+
+describe('components/Avatar.tsx', () => {
+  it('should render small avatar', () => {
+    const props: IAvatar = {
+      defaultIcon: MarkGithubIcon,
+      title: 'test',
+      url: 'https://avatars.githubusercontent.com/u/583231?v=4',
+      size: 'small',
+    };
+    const tree = render(<Avatar {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render medium avatar', () => {
+    const props: IAvatar = {
+      defaultIcon: MarkGithubIcon,
+      title: 'test',
+      url: 'https://avatars.githubusercontent.com/u/583231?v=4',
+      size: 'medium',
+    };
+    const tree = render(<Avatar {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render default icon when no url', () => {
+    const props: IAvatar = {
+      defaultIcon: MarkGithubIcon,
+      title: 'test',
+      url: null,
+      size: 'small',
+    };
+    const tree = render(<Avatar {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Avatar.tsx

@@ -0,0 +1,32 @@
+import type { Icon } from '@primer/octicons-react';
+import type { FC } from 'react';
+import { cn } from '../utils/cn';
+
+export interface IAvatar {
+  title: string;
+  url: string | null;
+  size: 'small' | 'medium';
+  defaultIcon: Icon;
+}
+
+export const Avatar: FC<IAvatar> = (props: IAvatar) => {
+  if (props.url) {
+    return (
+      <img
+        className={cn(
+          'cursor-pointer rounded-full object-cover',
+          props.size === 'small' ? 'size-4' : 'size-5',
+        )}
+        src={props.url}
+        alt={`${props.title}'s avatar`}
+      />
+    );
+  }
+
+  return (
+    <props.defaultIcon
+      size={props.size === 'small' ? 14 : 18}
+      className="text-gray-500 dark:text-gray-300"
+    />
+  );
+};

src/components/NotificationRow.tsx

@@ -30,6 +30,7 @@ import {
 } from '../utils/icons';
 import { openNotification, openUserProfile } from '../utils/links';
 import { formatReason } from '../utils/reason';
+import { Avatar } from './Avatar';
 import { PillButton } from './buttons/PillButton';
 
 interface INotificationRow {
@@ -141,11 +142,11 @@ export const NotificationRow: FC<INotificationRow> = ({
               }}
               className="flex-shrink-0"
             >
-              <img
-                className="size-4 cursor-pointer rounded-full object-cover"
-                src={notification.subject.user.avatar_url}
+              <Avatar
                 title={notification.subject.user.login}
-                alt={`${notification.subject.user.login}'s avatar`}
+                url={notification.subject.user.avatar_url}
+                size="small"
+                defaultIcon={FeedPersonIcon}
               />
             </button>
           ) : (

src/components/RepositoryNotifications.tsx

@@ -9,6 +9,7 @@ import { type FC, useCallback, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
 import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
+import { Avatar } from './Avatar';
 import { NotificationRow } from './NotificationRow';
 
 interface IRepositoryNotifications {
@@ -55,15 +56,12 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         onClick={toggleRepositoryNotifications}
       >
         <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
-          {avatarUrl ? (
-            <img
-              className="size-5 rounded"
-              src={avatarUrl}
-              alt={`${repoName}'s avatar`}
-            />
-          ) : (
-            <MarkGithubIcon size={18} />
-          )}
+          <Avatar
+            title={repoName}
+            url={avatarUrl}
+            size="medium"
+            defaultIcon={MarkGithubIcon}
+          />
           <span
             className="cursor-pointer truncate opacity-90"
             onClick={() => openRepository(repoNotifications[0].repository)}