feat(avatarGroup): introduce

components/Common/AvatarGroup/avatar/index.module.css

@@ -0,0 +1,3 @@
+.avatar {
+  @apply -ml-2 rounded-full border-2 border-white bg-neutral-100 first:ml-0 dark:border-neutral-950 dark:bg-neutral-800;
+}

components/Common/AvatarGroup/avatar/index.stories.tsx

@@ -0,0 +1,19 @@
+import { userNameToAvatarUrl } from '@/util/github';
+import Avatar from './';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Avatar>;
+type Meta = MetaObj<typeof Avatar>;
+export const Default: Story = {
+  args: {
+    src: userNameToAvatarUrl('AugustinMauroy'),
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    src: 'https://avatars.githubusercontent.com/u/fake-user-id',
+  },
+};
+
+export default { component: Avatar } as Meta;

components/Common/AvatarGroup/avatar/index.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import Image from 'next/image';
+import styles from './index.module.css';
+import type { FC } from 'react';
+
+type AvatarProps = {
+  src: string;
+};
+
+const Avatar: FC<AvatarProps> = ({ src }) => {
+  const [url, setUrl] = useState(src);
+
+  return (
+    <Image
+      className={styles.avatar}
+      src={url}
+      width={32}
+      height={32}
+      alt="avatar"
+      onError={() => setUrl('/static/images/avatar-placeholder.svg')}
+    />
+  );
+};
+
+export default Avatar;

components/Common/AvatarGroup/index.module.css

@@ -0,0 +1,7 @@
+.avatarGroup {
+  @apply flex items-center overflow-x-auto;
+
+  .showMore {
+    @apply flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-neutral-100 text-sm dark:border-neutral-950 dark:bg-neutral-900;
+  }
+}

components/Common/AvatarGroup/index.stories.tsx

@@ -0,0 +1,61 @@
+import { userNameToAvatarUrl } from '@/util/github';
+import AvatarGroup from './';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof AvatarGroup>;
+type Meta = MetaObj<typeof AvatarGroup>;
+
+const AvatarList = {
+  avatars: [
+    userNameToAvatarUrl('ovflowd'),
+    userNameToAvatarUrl('bmuenzenmeyer'),
+    userNameToAvatarUrl('AugustinMauroy'),
+    userNameToAvatarUrl('HinataKah0'),
+    userNameToAvatarUrl('Harkunwar'),
+    userNameToAvatarUrl('rodion-arr'),
+    userNameToAvatarUrl('mikeesto'),
+    userNameToAvatarUrl('bnb'),
+    userNameToAvatarUrl('benhalverson'),
+    userNameToAvatarUrl('aymen94'),
+    userNameToAvatarUrl('shanpriyan'),
+    userNameToAvatarUrl('Wai-Dung'),
+    userNameToAvatarUrl('manishprivet'),
+    userNameToAvatarUrl('araujogui'),
+  ],
+};
+
+export const Default: Story = {
+  args: {
+    ...AvatarList,
+  },
+};
+
+export const WithCustomLimit: Story = {
+  args: {
+    ...AvatarList,
+    limit: 5,
+  },
+};
+
+export const InSmallContainer: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: '150px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    ...AvatarList,
+    limit: 5,
+  },
+};
+
+export const WithForceShow: Story = {
+  args: {
+    ...AvatarList,
+    forceShow: true,
+  },
+};
+
+export default { component: AvatarGroup } as Meta;

components/Common/AvatarGroup/index.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { useState } from 'react';
+import styles from './index.module.css';
+import type { FC } from 'react';
+import Avatar from './avatar';
+
+type AvatarGroupProps = {
+  avatars: string[];
+  limit?: number;
+  forceShow?: boolean;
+};
+
+const AvatarGroup: FC<AvatarGroupProps> = ({
+  limit = 10,
+  avatars,
+  forceShow,
+}) => {
+  const [showMore, setShowMore] = useState(forceShow?.valueOf() || false);
+
+  const handleShowMoreClick = () => {
+    if (forceShow) return;
+    setShowMore(true);
+  };
+
+  return (
+    <div className={styles.avatarGroup}>
+      {showMore
+        ? avatars.map((avatar, index) => <Avatar key={index} src={avatar} />)
+        : avatars
+            .slice(0, limit)
+            .map((avatar, index) => <Avatar key={index} src={avatar} />)}
+      {avatars.length > limit && !showMore && (
+        <span className={styles.showMore} onClick={() => handleShowMoreClick()}>
+          +{avatars.length - limit}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default AvatarGroup;

util/__tests__/github.test.ts

@@ -0,0 +1,9 @@
+import { userNameToAvatarUrl } from '@/util/github';
+
+describe('userNameToAvatarUrl', () => {
+  it('returns the correct URL', () => {
+    expect(userNameToAvatarUrl('octocat')).toBe(
+      'https://avatars.githubusercontent.com/octocat'
+    );
+  });
+});

util/github.ts

@@ -0,0 +1,3 @@
+export const userNameToAvatarUrl = (userName: string): string => {
+  return `https://avatars.githubusercontent.com/${userName}`;
+};