added Avatar

app/declaration.d.ts

@@ -0,0 +1,9 @@
+/**
+ * this file declation removes the error when you static import image file
+ * on Image
+ */
+
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.jpg';

components/Avatar/Avatar.helpers.tsx

@@ -0,0 +1,12 @@
+//get the first letter of string for avatar
+export const getFirstLetterFromString = (name: string | undefined) => {
+  if (!name) return '\u00A0';
+
+  //remove spaces from string
+  let noSpace = name.split(' ').join('');
+  //remove special char from string
+  let noSpecialChar = noSpace.replace(/[^a-zA-Z0-9]/g, '');
+
+  //get the 1st letter of string
+  return noSpecialChar.charAt(0);
+};

components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './Avatar';
+
+import AvatarPic1 from '../../public/assets/avatar.jpg';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    imageUrl: AvatarPic1,
+    userName: 'Batman',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    imageUrl: AvatarPic1,
+    userName: 'Batman',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+    imageUrl: AvatarPic1,
+    userName: 'Batman',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    imageUrl: AvatarPic1,
+    userName: 'Batman',
+  },
+};
+
+export const NoImageUrlSmall: Story = {
+  args: {
+    size: 'small',
+    userName: 'Batman',
+  },
+};
+
+export const NoImageUrlMedium: Story = {
+  args: {
+    size: 'medium',
+    userName: 'Batman',
+  },
+};
+
+export const NoImageUrlLarge: Story = {
+  args: {
+    size: 'large',
+    userName: 'Batman',
+  },
+};

components/Avatar/Avatar.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Image from 'next/image';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+import AvatarPic1 from '../../public/assets/avatar.jpg';
+import { getFirstLetterFromString } from './Avatar.helpers';
+
+interface AvatarProps extends React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * size of the Avatar
+   */
+  size: 'small' | 'medium' | 'large';
+  /**
+   * sets the user avatar image
+   */
+  imageUrl?: string | null;
+  /**
+   * user name that will be used to get the 1st Letter for Avatar Fallback
+   */
+  userName: string;
+}
+
+const avatarContainer = cva(
+  [
+    'flex items-center justify-center relative ',
+    'bg-gray-300 text-[white]',
+    'overflow-hidden rounded-full uppercase',
+  ],
+  {
+    variants: {
+      size: {
+        small: 'h-6 w-6 min-w-6 text-sm  ',
+        medium: 'h-8 w-8 min-w-8 text-base ',
+        large: 'h-10 w-10 min-w-10 text-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+    },
+  }
+);
+
+const Avatar = (props: AvatarProps) => {
+  const { size, imageUrl, userName, ...rest } = props;
+
+  return (
+    <div className={cn(avatarContainer({ size }))}>
+      {imageUrl ? (
+        <Image src={AvatarPic1} alt="avatar pic" fill />
+      ) : (
+        getFirstLetterFromString(userName)
+      )}
+    </div>
+  );
+};
+
+export default Avatar;