From e1597189ac24004883b3644989c0bea90fc511fe Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 19 Jun 2024 07:29:17 -0400
Subject: [PATCH 1/3] feat: avatar component

---
 src/components/Avatar.test.tsx                |  38 +++
 src/components/Avatar.tsx                     |  32 +++
 src/components/NotificationRow.tsx            |   9 +-
 src/components/RepositoryNotifications.tsx    |  16 +-
 .../__snapshots__/Avatar.test.tsx.snap        | 238 ++++++++++++++++++
 .../NotificationRow.test.tsx.snap             |  12 +-
 .../RepositoryNotifications.test.tsx.snap     |  14 +-
 7 files changed, 331 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Avatar.test.tsx
 create mode 100644 src/components/Avatar.tsx
 create mode 100644 src/components/__snapshots__/Avatar.test.tsx.snap

diff --git a/src/components/Avatar.test.tsx b/src/components/Avatar.test.tsx
new file mode 100644
index 000000000..7cbbb08f8
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
new file mode 100644
index 000000000..6d089bb4b
--- /dev/null
+++ b/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"
+    />
+  );
+};
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 5c7c86f19..745883585 100644
--- a/src/components/NotificationRow.tsx
+++ b/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>
           ) : (
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index 1aadf16f9..c55e2d86a 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/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)}
diff --git a/src/components/__snapshots__/Avatar.test.tsx.snap b/src/components/__snapshots__/Avatar.test.tsx.snap
new file mode 100644
index 000000000..e12913de8
--- /dev/null
+++ b/src/components/__snapshots__/Avatar.test.tsx.snap
@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Avatar.tsx should render default icon when no url 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <svg
+        aria-hidden="true"
+        class="text-gray-500 dark:text-gray-300"
+        fill="currentColor"
+        focusable="false"
+        height="14"
+        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        viewBox="0 0 16 16"
+        width="14"
+      >
+        <path
+          d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+        />
+      </svg>
+    </div>
+  </body>,
+  "container": <div>
+    <svg
+      aria-hidden="true"
+      class="text-gray-500 dark:text-gray-300"
+      fill="currentColor"
+      focusable="false"
+      height="14"
+      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      viewBox="0 0 16 16"
+      width="14"
+    >
+      <path
+        d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+      />
+    </svg>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/Avatar.tsx should render medium avatar 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <img
+        alt="test's avatar"
+        class="cursor-pointer rounded-full object-cover size-5"
+        src="https://avatars.githubusercontent.com/u/583231?v=4"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <img
+      alt="test's avatar"
+      class="cursor-pointer rounded-full object-cover size-5"
+      src="https://avatars.githubusercontent.com/u/583231?v=4"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/Avatar.tsx should render small avatar 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <img
+        alt="test's avatar"
+        class="cursor-pointer rounded-full object-cover size-4"
+        src="https://avatars.githubusercontent.com/u/583231?v=4"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <img
+      alt="test's avatar"
+      class="cursor-pointer rounded-full object-cover size-4"
+      src="https://avatars.githubusercontent.com/u/583231?v=4"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 1ade8bac3..fa2df90e4 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -4683,9 +4683,8 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             >
               <img
                 alt="gitify-app's avatar"
-                class="size-4 cursor-pointer rounded-full object-cover"
+                class="cursor-pointer rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                title="gitify-app"
               />
             </button>
             <div
@@ -4866,9 +4865,8 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           >
             <img
               alt="gitify-app's avatar"
-              class="size-4 cursor-pointer rounded-full object-cover"
+              class="cursor-pointer rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-              title="gitify-app"
             />
           </button>
           <div
@@ -5106,9 +5104,8 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             >
               <img
                 alt="gitify-app's avatar"
-                class="size-4 cursor-pointer rounded-full object-cover"
+                class="cursor-pointer rounded-full object-cover size-4"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                title="gitify-app"
               />
             </button>
             <div
@@ -5289,9 +5286,8 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             <img
               alt="gitify-app's avatar"
-              class="size-4 cursor-pointer rounded-full object-cover"
+              class="cursor-pointer rounded-full object-cover size-4"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-              title="gitify-app"
             />
           </button>
           <div
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 729d3066f..5d08ac19c 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         >
           <img
             alt="gitify-app/notifications-test's avatar"
-            class="size-5 rounded"
+            class="cursor-pointer rounded-full object-cover size-5"
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
@@ -106,7 +106,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       >
         <img
           alt="gitify-app/notifications-test's avatar"
-          class="size-5 rounded"
+          class="cursor-pointer rounded-full object-cover size-5"
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
@@ -256,7 +256,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-mark-github"
+            class="text-gray-500 dark:text-gray-300"
             fill="currentColor"
             focusable="false"
             height="18"
@@ -351,7 +351,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-mark-github"
+            class="text-gray-500 dark:text-gray-300"
             fill="currentColor"
             focusable="false"
             height="18"
@@ -453,7 +453,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-mark-github"
+          class="text-gray-500 dark:text-gray-300"
           fill="currentColor"
           focusable="false"
           height="18"
@@ -612,7 +612,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
         >
           <svg
             aria-hidden="true"
-            class="octicon octicon-mark-github"
+            class="text-gray-500 dark:text-gray-300"
             fill="currentColor"
             focusable="false"
             height="18"
@@ -714,7 +714,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
       >
         <svg
           aria-hidden="true"
-          class="octicon octicon-mark-github"
+          class="text-gray-500 dark:text-gray-300"
           fill="currentColor"
           focusable="false"
           height="18"

From e74b03fe58ce28ef3a4976148dd5d697b2655521 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 19 Jun 2024 08:15:16 -0400
Subject: [PATCH 2/3] feat: avatar component

---
 src/components/NotificationRow.tsx                     |  4 ++--
 src/components/RepositoryNotifications.tsx             |  4 ++--
 .../{Avatar.test.tsx => icons/AvatarIcon.test.tsx}     | 10 +++++-----
 src/components/{Avatar.tsx => icons/AvatarIcon.tsx}    |  4 ++--
 .../__snapshots__/AvatarIcon.test.tsx.snap}            |  6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)
 rename src/components/{Avatar.test.tsx => icons/AvatarIcon.test.tsx} (76%)
 rename src/components/{Avatar.tsx => icons/AvatarIcon.tsx} (86%)
 rename src/components/{__snapshots__/Avatar.test.tsx.snap => icons/__snapshots__/AvatarIcon.test.tsx.snap} (97%)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 745883585..2ce624153 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -30,8 +30,8 @@ import {
 } from '../utils/icons';
 import { openNotification, openUserProfile } from '../utils/links';
 import { formatReason } from '../utils/reason';
-import { Avatar } from './Avatar';
 import { PillButton } from './buttons/PillButton';
+import { AvatarIcon } from './icons/AvatarIcon';
 
 interface INotificationRow {
   notification: Notification;
@@ -142,7 +142,7 @@ export const NotificationRow: FC<INotificationRow> = ({
               }}
               className="flex-shrink-0"
             >
-              <Avatar
+              <AvatarIcon
                 title={notification.subject.user.login}
                 url={notification.subject.user.avatar_url}
                 size="small"
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index c55e2d86a..31909999b 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -9,8 +9,8 @@ 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';
+import { AvatarIcon } from './icons/AvatarIcon';
 
 interface IRepositoryNotifications {
   repoNotifications: Notification[];
@@ -56,7 +56,7 @@ 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">
-          <Avatar
+          <AvatarIcon
             title={repoName}
             url={avatarUrl}
             size="medium"
diff --git a/src/components/Avatar.test.tsx b/src/components/icons/AvatarIcon.test.tsx
similarity index 76%
rename from src/components/Avatar.test.tsx
rename to src/components/icons/AvatarIcon.test.tsx
index 7cbbb08f8..25e0c600f 100644
--- a/src/components/Avatar.test.tsx
+++ b/src/components/icons/AvatarIcon.test.tsx
@@ -1,8 +1,8 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
-import { Avatar, type IAvatar } from './Avatar';
+import { AvatarIcon, type IAvatar } from './AvatarIcon';
 
-describe('components/Avatar.tsx', () => {
+describe('components/icons/AvatarIcon.tsx', () => {
   it('should render small avatar', () => {
     const props: IAvatar = {
       defaultIcon: MarkGithubIcon,
@@ -10,7 +10,7 @@ describe('components/Avatar.tsx', () => {
       url: 'https://avatars.githubusercontent.com/u/583231?v=4',
       size: 'small',
     };
-    const tree = render(<Avatar {...props} />);
+    const tree = render(<AvatarIcon {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -21,7 +21,7 @@ describe('components/Avatar.tsx', () => {
       url: 'https://avatars.githubusercontent.com/u/583231?v=4',
       size: 'medium',
     };
-    const tree = render(<Avatar {...props} />);
+    const tree = render(<AvatarIcon {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
@@ -32,7 +32,7 @@ describe('components/Avatar.tsx', () => {
       url: null,
       size: 'small',
     };
-    const tree = render(<Avatar {...props} />);
+    const tree = render(<AvatarIcon {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/Avatar.tsx b/src/components/icons/AvatarIcon.tsx
similarity index 86%
rename from src/components/Avatar.tsx
rename to src/components/icons/AvatarIcon.tsx
index 6d089bb4b..8137c3d0d 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/icons/AvatarIcon.tsx
@@ -1,6 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import { cn } from '../utils/cn';
+import { cn } from '../../utils/cn';
 
 export interface IAvatar {
   title: string;
@@ -9,7 +9,7 @@ export interface IAvatar {
   defaultIcon: Icon;
 }
 
-export const Avatar: FC<IAvatar> = (props: IAvatar) => {
+export const AvatarIcon: FC<IAvatar> = (props: IAvatar) => {
   if (props.url) {
     return (
       <img
diff --git a/src/components/__snapshots__/Avatar.test.tsx.snap b/src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
similarity index 97%
rename from src/components/__snapshots__/Avatar.test.tsx.snap
rename to src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
index e12913de8..61358d069 100644
--- a/src/components/__snapshots__/Avatar.test.tsx.snap
+++ b/src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/Avatar.tsx should render default icon when no url 1`] = `
+exports[`components/icons/AvatarIcon.tsx should render default icon when no url 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
@@ -91,7 +91,7 @@ exports[`components/Avatar.tsx should render default icon when no url 1`] = `
 }
 `;
 
-exports[`components/Avatar.tsx should render medium avatar 1`] = `
+exports[`components/icons/AvatarIcon.tsx should render medium avatar 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
@@ -164,7 +164,7 @@ exports[`components/Avatar.tsx should render medium avatar 1`] = `
 }
 `;
 
-exports[`components/Avatar.tsx should render small avatar 1`] = `
+exports[`components/icons/AvatarIcon.tsx should render small avatar 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>

From 37615facaf9fa99b60deb83779146eaa83fbdc28 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 19 Jun 2024 08:18:36 -0400
Subject: [PATCH 3/3] feat: avatar component

---
 src/components/icons/AvatarIcon.test.tsx | 8 ++++----
 src/components/icons/AvatarIcon.tsx      | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/icons/AvatarIcon.test.tsx b/src/components/icons/AvatarIcon.test.tsx
index 25e0c600f..4bb3c6c31 100644
--- a/src/components/icons/AvatarIcon.test.tsx
+++ b/src/components/icons/AvatarIcon.test.tsx
@@ -1,10 +1,10 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
-import { AvatarIcon, type IAvatar } from './AvatarIcon';
+import { AvatarIcon, type IAvatarIcon } from './AvatarIcon';
 
 describe('components/icons/AvatarIcon.tsx', () => {
   it('should render small avatar', () => {
-    const props: IAvatar = {
+    const props: IAvatarIcon = {
       defaultIcon: MarkGithubIcon,
       title: 'test',
       url: 'https://avatars.githubusercontent.com/u/583231?v=4',
@@ -15,7 +15,7 @@ describe('components/icons/AvatarIcon.tsx', () => {
   });
 
   it('should render medium avatar', () => {
-    const props: IAvatar = {
+    const props: IAvatarIcon = {
       defaultIcon: MarkGithubIcon,
       title: 'test',
       url: 'https://avatars.githubusercontent.com/u/583231?v=4',
@@ -26,7 +26,7 @@ describe('components/icons/AvatarIcon.tsx', () => {
   });
 
   it('should render default icon when no url', () => {
-    const props: IAvatar = {
+    const props: IAvatarIcon = {
       defaultIcon: MarkGithubIcon,
       title: 'test',
       url: null,
diff --git a/src/components/icons/AvatarIcon.tsx b/src/components/icons/AvatarIcon.tsx
index 8137c3d0d..08881ec76 100644
--- a/src/components/icons/AvatarIcon.tsx
+++ b/src/components/icons/AvatarIcon.tsx
@@ -2,14 +2,14 @@ import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
 import { cn } from '../../utils/cn';
 
-export interface IAvatar {
+export interface IAvatarIcon {
   title: string;
   url: string | null;
   size: 'small' | 'medium';
   defaultIcon: Icon;
 }
 
-export const AvatarIcon: FC<IAvatar> = (props: IAvatar) => {
+export const AvatarIcon: FC<IAvatarIcon> = (props: IAvatarIcon) => {
   if (props.url) {
     return (
       <img