feat: created tags and avatar components and added stories for them (a…

…syncapi#3081)

Co-authored-by: Akshat Nema <[email protected]>

components/AuthorAvatars.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Avatar from './Avatar';
+
 interface Author {
   name: string;
   photo: string;
@@ -18,29 +20,14 @@ interface AuthorAvatarsProps {
 export default function AuthorAvatars({ authors = [] }: AuthorAvatarsProps) {
   return (
     <>
-      {authors.map((author, index) => {
-        const avatar = (
-          <img
-            key={index}
-            title={author.name}
-            className={`${index > 0 ? `left- absolute${index * 7} top-0` : `mr- relative${(authors.length - 1) * 7}`} 
-              z-${(authors.length - 1 - index) * 10} size-10 rounded-full border-2 
-              border-white object-cover hover:z-50`}
-            src={author.photo}
-            loading='lazy'
-            data-testid='AuthorAvatars-img'
-            alt={author.name} // Added alt attribute here
-          />
-        );
-
-        return author.link ? (
-          <a href={author.link} key={index} data-testid='AuthorAvatars-link'>
-            {avatar}
-          </a>
-        ) : (
-          <React.Fragment key={index}>{avatar}</React.Fragment>
-        );
-      })}
+      {authors.map((author, index) => (
+        <Avatar
+          key={index}
+          {...author}
+          className={`${index > 0 ? `left- absolute${index * 7} top-0` : `mr- relative${(authors.length - 1) * 7}`}
+        z-${(authors.length - 1 - index) * 10}`}
+        />
+      ))}
     </>
   );
 }

components/Avatar.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const DefaultAvatar: Story = {
+  args: {
+    name: 'Avatar',
+    link: 'https://www.asyncapi.com/',
+    photo: '/favicon-32x32.png'
+  }
+};

components/Avatar.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface AvatarProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The name of the avatar. */
+  name: string;
+
+  /** The photo of the avatar. */
+  photo: string;
+
+  /** The link of the avatar. */
+  link?: string;
+
+  /** The class name to be applied to the avatar. */
+  className: string;
+}
+
+/**
+ * This component renders avatar.
+ */
+export default function Avatar({ name, photo, link, className }: AvatarProps) {
+  const avatar = (
+    <img
+      title={name}
+      className={`size-10 rounded-full border-2 border-white object-cover hover:z-50 ${className}`}
+      src={photo}
+      loading='lazy'
+      data-testid='Avatars-img'
+      alt={name}
+    />
+  );
+
+  return link ? (
+    <a href={link} data-testid='Avatars-link'>
+      {avatar}
+    </a>
+  ) : (
+    <React.Fragment>{avatar}</React.Fragment>
+  );
+}

components/tools/Tags.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SelectTags from './Tags';
+
+const meta: Meta<typeof SelectTags> = {
+  title: 'Components/Tags',
+  component: SelectTags,
+  argTypes: {
+    name: {
+      control: { type: 'text' }
+    },
+    bgColor: {
+      control: { type: 'text' }
+    },
+    borderColor: {
+      control: { type: 'text' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectTags>;
+
+export const DefaultTag: Story = {
+  args: {
+    name: 'Default',
+    bgColor: 'bg-gray-200',
+    borderColor: 'border-gray-200'
+  }
+};

components/tools/Tags.tsx

@@ -1,16 +1,18 @@
 interface SelectTagsProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The content to be displayed inside the tag. */
   name?: string;
+
+  /** The color of the tag. */
   bgColor: string;
+
+  /** The border color of the tag. */
   borderColor: string;
 }
 
 /**
- * @description This component displays tags. These tags are displayed for languages and technologies in the tools card.
- *
- * @param {SelectTagsProps} props - The props for the Select Tags component.
- * @param {string} props.name - The content to be displayed inside the tag.
- * @param {string} props.bgColor - The color of the tag.
- * @param {string} props.borderColor - The border color of the tag.
+ * This component displays tags. These tags are displayed for languages and technologies in the tools card.
  */
 export default function SelectTags({ name = '', bgColor, borderColor }: SelectTagsProps) {
   return (