avatar update

web/src/components/ui/avatar/Avatar.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Avatar } from './Avatar';
+import { faker } from '@faker-js/faker';
 
 const meta = {
-  title: 'UI/Avatar',
+  title: 'UI/Avatar/Avatar',
   component: Avatar,
   parameters: {
     layout: 'centered'
@@ -22,7 +23,13 @@ export const Default: Story = {
 export const WithImage: Story = {
   args: {
     name: 'John Doe',
-    image: 'https://github.com/shadcn.png'
+    image: faker.image.avatar()
+  }
+};
+
+export const WithImageAndNoName: Story = {
+  args: {
+    image: faker.image.avatar()
   }
 };
 

web/src/components/ui/avatar/Avatar.tsx

@@ -17,7 +17,7 @@ export interface AvatarProps {
 export const Avatar: React.FC<AvatarProps> = React.memo(
   ({ image, name, className, useToolTip, size, fallbackClassName }) => {
     const hasName = !!name;
-    const nameLetters = hasName ? createNameLetters(name, image) : '';
+    const nameLetters = createNameLetters(name);
 
     return (
       <Tooltip delayDuration={550} title={useToolTip ? name || '' : ''}>
@@ -28,10 +28,11 @@ export const Avatar: React.FC<AvatarProps> = React.memo(
             height: size
           }}>
           {image && <AvatarImage src={image} />}
-          <AvatarFallback
+          {hasName ? (
-            className={cn(!hasName && !image && 'border bg-white', fallbackClassName)}>
+            <NameLettersFallback fallbackClassName={fallbackClassName} nameLetters={nameLetters} />
-            {nameLetters || <BusterAvatarFallback />}
+          ) : (
-          </AvatarFallback>
+            <BusterAvatarFallback fallbackClassName={fallbackClassName} />
+          )}
         </AvatarBase>
       </Tooltip>
     );
@@ -39,20 +40,28 @@ export const Avatar: React.FC<AvatarProps> = React.memo(
 );
 Avatar.displayName = 'Avatar';
 
-const BusterAvatarFallback: React.FC = () => {
+const NameLettersFallback: React.FC<{ fallbackClassName?: string; nameLetters: string }> = ({
+  fallbackClassName,
+  nameLetters
+}) => {
+  return <AvatarFallback className={cn(fallbackClassName)}>{nameLetters}</AvatarFallback>;
+};
+
+const BusterAvatarFallback: React.FC<{ fallbackClassName?: string }> = ({ fallbackClassName }) => {
   return (
-    <div className="text-foreground flex h-full w-full items-center justify-center">
+    <AvatarFallback className={cn('border bg-white', fallbackClassName)}>
-      <BusterLogo className="h-full w-full translate-x-[1px] p-1" />
+      <div className="text-foreground flex h-full w-full items-center justify-center">
-    </div>
+        <BusterLogo className="h-full w-full translate-x-[1px] p-1" />
+      </div>
+    </AvatarFallback>
   );
 };
 
-const createNameLetters = (name?: string | null, image?: string | null | React.ReactNode) => {
+const createNameLetters = (name?: string | null) => {
-  if (name && !image) {
+  if (name) {
     const firstTwoLetters = getFirstTwoCapitalizedLetters(name);
     if (firstTwoLetters.length == 2) return firstTwoLetters;
 
-    //Get First Name Initial
     const _name = name.split(' ') as [string, string];
     const returnName = `${_name[0][0]}`.toUpperCase().replace('@', '');
 

web/src/components/ui/avatar/AvatarBase.tsx

@@ -35,7 +35,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'bg-gray-light/60 text-background flex h-full w-full items-center justify-center rounded-full text-xs',
+      'bg-gray-light/60 text-background flex h-full w-full items-center justify-center rounded-full text-xs leading-0',
       className
     )}
     {...props}