expand sub tasks

worklenz-frontend/src/components/Avatar.tsx

@@ -11,47 +11,63 @@ interface AvatarProps {
   style?: React.CSSProperties;
 }
 
-const Avatar: React.FC<AvatarProps> = ({ 
-  name = '', 
-  size = 'default', 
-  isDarkMode = false, 
+const Avatar: React.FC<AvatarProps> = ({
+  name = '',
+  size = 'default',
+  isDarkMode = false,
   className = '',
   src,
   backgroundColor,
   onClick,
-  style = {}
+  style = {},
 }) => {
   // Handle both numeric and string sizes
   const getSize = () => {
     if (typeof size === 'number') {
       return { width: size, height: size, fontSize: `${size * 0.4}px` };
     }
-    
+
     const sizeMap = {
       small: { width: 24, height: 24, fontSize: '10px' },
       default: { width: 32, height: 32, fontSize: '14px' },
-      large: { width: 48, height: 48, fontSize: '18px' }
+      large: { width: 48, height: 48, fontSize: '18px' },
     };
-    
+
     return sizeMap[size];
   };
 
   const sizeStyle = getSize();
-  
+
   const lightColors = [
-    '#f56565', '#4299e1', '#48bb78', '#ed8936', '#9f7aea', 
-    '#ed64a6', '#667eea', '#38b2ac', '#f6ad55', '#4fd1c7'
+    '#f56565',
+    '#4299e1',
+    '#48bb78',
+    '#ed8936',
+    '#9f7aea',
+    '#ed64a6',
+    '#667eea',
+    '#38b2ac',
+    '#f6ad55',
+    '#4fd1c7',
   ];
-  
+
   const darkColors = [
-    '#e53e3e', '#3182ce', '#38a169', '#dd6b20', '#805ad5', 
-    '#d53f8c', '#5a67d8', '#319795', '#d69e2e', '#319795'
+    '#e53e3e',
+    '#3182ce',
+    '#38a169',
+    '#dd6b20',
+    '#805ad5',
+    '#d53f8c',
+    '#5a67d8',
+    '#319795',
+    '#d69e2e',
+    '#319795',
   ];
-  
+
   const colors = isDarkMode ? darkColors : lightColors;
   const colorIndex = name.charCodeAt(0) % colors.length;
   const defaultBgColor = backgroundColor || colors[colorIndex];
-  
+
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     onClick?.(e);
@@ -60,7 +76,7 @@ const Avatar: React.FC<AvatarProps> = ({
   const avatarStyle = {
     ...sizeStyle,
     backgroundColor: defaultBgColor,
-    ...style
+    ...style,
   };
 
   if (src) {
@@ -74,9 +90,9 @@ const Avatar: React.FC<AvatarProps> = ({
       />
     );
   }
-  
+
   return (
-    <div 
+    <div
       onClick={handleClick}
       className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
       style={avatarStyle}
@@ -86,4 +102,4 @@ const Avatar: React.FC<AvatarProps> = ({
   );
 };
 
-export default Avatar; 
+export default Avatar;