diff --git a/components/Avatar/Avatar.tsx b/components/Avatar/Avatar.tsx
index a495462..716ce18 100644
--- a/components/Avatar/Avatar.tsx
+++ b/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 (
{imageUrl ? (
-
+
) : (
getFirstLetterFromString(userName)
)}
diff --git a/components/AvatarWithOnlineBadge/AvatarWithOnlineBadge.stories.tsx b/components/AvatarWithOnlineBadge/AvatarWithOnlineBadge.stories.tsx
new file mode 100644
index 0000000..7088828
--- /dev/null
+++ b/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
= {
+ title: 'Components/AvatarWithOnlineBadge',
+ component: AvatarWithOnlineBadge,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+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,
+ },
+};
diff --git a/components/AvatarWithOnlineBadge/AvatarWithOnlineBadge.tsx b/components/AvatarWithOnlineBadge/AvatarWithOnlineBadge.tsx
new file mode 100644
index 0000000..7032f6d
--- /dev/null
+++ b/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 (
+
+
+
+ {/* badge */}
+ {isOnline && (
+
+ )}
+
+ );
+};
+
+export default AvatarWithOnlineBadge;
diff --git a/components/AvatarWithOnlineBadge/index.tsx b/components/AvatarWithOnlineBadge/index.tsx
new file mode 100644
index 0000000..c43e304
--- /dev/null
+++ b/components/AvatarWithOnlineBadge/index.tsx
@@ -0,0 +1 @@
+export { default } from './AvatarWithOnlineBadge';