46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { FC } from 'react';
|
|
|
|
interface UserProfileSectionProps {
|
|
userData: {
|
|
avatar?: string;
|
|
email?: string;
|
|
person?: {
|
|
firstname: string;
|
|
surname: string;
|
|
};
|
|
} | null;
|
|
onlineData?: {
|
|
userType?: string;
|
|
} | null;
|
|
}
|
|
|
|
const UserProfileSection: FC<UserProfileSectionProps> = ({ userData, onlineData }) => {
|
|
if (!userData) return null;
|
|
return (
|
|
<div className="mb-2">
|
|
<div className="w-full text-xs bg-white shadow rounded-lg overflow-hidden transition-all hover:shadow-md">
|
|
<div className="bg-amber-300 p-2 hover:bg-amber-400 transition-all">
|
|
<div className="flex items-center">
|
|
<div className="mr-2">
|
|
{userData && userData.avatar ? (
|
|
<img className="rounded-full border border-white" src={userData.avatar} alt="Avatar" width={40} height={40} />
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-amber-400 flex items-center justify-center border border-white">
|
|
<div className="text-white text-sm font-bold">{userData?.email ? userData.email.slice(0, 2).toUpperCase() : 'U'}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<h2 className="text-sm font-bold text-black truncate">{userData?.person ? `${userData.person.firstname} ${userData.person.surname}` : 'User'}</h2>
|
|
<p className="text-xs text-amber-800 truncate">{userData?.email || 'No email'}</p>
|
|
<p className="text-xs font-medium capitalize">{onlineData?.userType || 'guest'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserProfileSection;
|