added AvatarWithOnlineBadge

components/Avatar/Avatar.tsx

@@ -10,7 +10,7 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * size of the Avatar
    */
-  size: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
   /**
    * sets the user avatar image
    */
@@ -47,7 +47,7 @@ const Avatar = (props: AvatarProps) => {
   return (
     <div className={cn(avatarContainer({ size }))}>
       {imageUrl ? (
-        <Image src={AvatarPic1} alt="avatar pic" fill />
+        <Image src={imageUrl} alt="avatar pic" fill />
       ) : (
         getFirstLetterFromString(userName)
       )}

components/AvatarWithOnlineBadge/AvatarWithOnlineBadge.stories.tsx

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

components/AvatarWithOnlineBadge/AvatarWithOnlineBadge.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Avatar from '../Avatar/Avatar';
+
+type AvatarWithOnlineBadgeProps = {
+  /**
+   * 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;
+  /**
+   * indicator if user is Online
+   */
+  isOnline: boolean;
+};
+
+const AvatarWithOnlineBadge = (props: AvatarWithOnlineBadgeProps) => {
+  const { size = 'medium', imageUrl, userName, isOnline } = props;
+
+  return (
+    <div className="relative w-fit">
+      <Avatar size={size} imageUrl={imageUrl} userName={userName} />
+
+      {/* badge */}
+      {isOnline && (
+        <div className="absolute right-[-2px] bottom-[-2px] grid place-content-center w-3 h-3 min-w-3 rounded-full bg-white">
+          <div className="bg-green-600 w-2 h-2 min-w-2 rounded-full" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AvatarWithOnlineBadge;

components/AvatarWithOnlineBadge/index.tsx

@@ -0,0 +1 @@
+export { default } from './AvatarWithOnlineBadge';