05729285af
- Added AssigneeSelector, Avatar, AvatarGroup, Button, Checkbox, CustomColordLabel, CustomNumberLabel, LabelsSelector, Progress, Tag, and Tooltip components for improved UI functionality. - Updated Vite configuration to change the development server port to 5173 and removed unnecessary interop settings for module compatibility. - Enhanced task management components to utilize new task structure and improve performance.
89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface AvatarProps {
|
|
name?: string;
|
|
size?: number | 'small' | 'default' | 'large';
|
|
isDarkMode?: boolean;
|
|
className?: string;
|
|
src?: string;
|
|
backgroundColor?: string;
|
|
onClick?: (e: React.MouseEvent) => void;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const Avatar: React.FC<AvatarProps> = ({
|
|
name = '',
|
|
size = 'default',
|
|
isDarkMode = false,
|
|
className = '',
|
|
src,
|
|
backgroundColor,
|
|
onClick,
|
|
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' }
|
|
};
|
|
|
|
return sizeMap[size];
|
|
};
|
|
|
|
const sizeStyle = getSize();
|
|
|
|
const lightColors = [
|
|
'#f56565', '#4299e1', '#48bb78', '#ed8936', '#9f7aea',
|
|
'#ed64a6', '#667eea', '#38b2ac', '#f6ad55', '#4fd1c7'
|
|
];
|
|
|
|
const darkColors = [
|
|
'#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);
|
|
};
|
|
|
|
const avatarStyle = {
|
|
...sizeStyle,
|
|
backgroundColor: defaultBgColor,
|
|
...style
|
|
};
|
|
|
|
if (src) {
|
|
return (
|
|
<img
|
|
src={src}
|
|
alt={name}
|
|
onClick={handleClick}
|
|
className={`rounded-full object-cover shadow-sm cursor-pointer ${className}`}
|
|
style={avatarStyle}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
onClick={handleClick}
|
|
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
|
|
style={avatarStyle}
|
|
>
|
|
{name.charAt(0)?.toUpperCase() || '?'}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Avatar;
|