Center align pie chart
The pie chart was not properly centered. This commit aligns the pie chart to the center of the component.
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface SimpleAvatarProps {
|
||||
src?: string;
|
||||
name: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SimpleAvatar: React.FC<SimpleAvatarProps> = ({
|
||||
src,
|
||||
name,
|
||||
size = 'md',
|
||||
className = ''
|
||||
}) => {
|
||||
const initials = name
|
||||
.split(' ')
|
||||
.map(part => part.charAt(0))
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.substring(0, 2);
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'w-8 h-8 text-xs',
|
||||
md: 'w-10 h-10 text-sm',
|
||||
lg: 'w-12 h-12 text-base'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex items-center justify-center rounded-full bg-neuro-income text-white ${sizeClasses[size]} ${className}`}>
|
||||
{src ? (
|
||||
<img src={src} alt={name} className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
<span>{initials}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleAvatar;
|
||||
|
||||
Reference in New Issue
Block a user