Sage100/src/components/UserAvatar.jsx
2026-01-20 11:05:50 +03:00

24 lines
799 B
JavaScript

import React from 'react';
const UserAvatar = ({ name, role, image }) => {
const initials = name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase();
return (
<div className="flex items-center gap-3 pl-3 border-l border-gray-200 dark:border-gray-800">
<div className="text-right hidden sm:block">
<p className="text-sm font-medium text-gray-900 dark:text-white">{name}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{role}</p>
</div>
<div className="w-9 h-9 rounded-full bg-[#941403] text-white flex items-center justify-center text-sm font-semibold">
{image ? <img src={image} alt={name} className="w-full h-full rounded-full object-cover" /> : initials}
</div>
</div>
);
};
export default UserAvatar;