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();
+ 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();
+ 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();
+ 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 = (props: IAvatar) => {
+ if (props.url) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
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 = ({
}}
className="flex-shrink-0"
>
-
) : (
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 = ({
onClick={toggleRepositoryNotifications}
>
- {avatarUrl ? (
-
- ) : (
-
- )}
+
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":
+
+ ,
+ "container": ,
+ "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":
+
+
+
+ ,
+ "container":
+
+
,
+ "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":
+
+
+
+ ,
+ "container":
+
+
,
+ "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`]
>