refactor: auth method icon component (#1195)

src/components/icons/AuthMethodIcon.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import { AuthMethodIcon, type IAuthMethodIcon } from './AuthMethodIcon';
+
+describe('components/icons/AuthMethodIcon.tsx', () => {
+  it('should render GitHub App icon', () => {
+    const props: IAuthMethodIcon = {
+      type: 'GitHub App',
+      size: 16,
+    };
+    const tree = render(<AuthMethodIcon {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render Personal Access Token icon', () => {
+    const props: IAuthMethodIcon = {
+      type: 'Personal Access Token',
+      size: 16,
+    };
+    const tree = render(<AuthMethodIcon {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render OAuth App icon', () => {
+    const props: IAuthMethodIcon = {
+      type: 'OAuth App',
+      size: 16,
+    };
+    const tree = render(<AuthMethodIcon {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/icons/AuthMethodIcon.tsx

@@ -0,0 +1,20 @@
+import { AppsIcon, KeyIcon, PersonIcon } from '@primer/octicons-react';
+import type { FC } from 'react';
+import type { AuthMethod } from '../../utils/auth/types';
+
+export interface IAuthMethodIcon {
+  type: AuthMethod;
+  size: number;
+}
+
+export const AuthMethodIcon: FC<IAuthMethodIcon> = (props: IAuthMethodIcon) => {
+  return (
+    <span aria-label={props.type} className="mr-1">
+      {props.type === 'GitHub App' ? <AppsIcon size={props.size} /> : null}
+      {props.type === 'Personal Access Token' ? (
+        <KeyIcon size={props.size} />
+      ) : null}
+      {props.type === 'OAuth App' ? <PersonIcon size={props.size} /> : null}
+    </span>
+  );
+};