62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { FiX, FiEdit2 } from 'react-icons/fi';
|
|
interface Account {
|
|
id: number;
|
|
isDefault: boolean;
|
|
name: string;
|
|
}
|
|
|
|
interface UserData {
|
|
id: number;
|
|
name:string
|
|
email: string;
|
|
language: string;
|
|
account: Account;
|
|
}
|
|
|
|
interface UserProfileProps {
|
|
userData: UserData;
|
|
}
|
|
const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
|
|
const getInitials = (firstName: string, lastName: string) => {
|
|
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
|
};
|
|
return (
|
|
<div className="bg-white rounded-md shadow-sm flex w-full p-6">
|
|
{/* Profile Picture */}
|
|
<div className="flex-shrink-0 text-center">
|
|
<div className="w-20 h-20 bg-green-800 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
|
|
{userData.name.slice(0,2).toUpperCase()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Fields */}
|
|
<div className="flex flex-col justify-center flex-1 ms-10">
|
|
{/* Row: Name */}
|
|
<div className="flex py-1">
|
|
<div className="text-gray-500 font-medium text-[13px] w-32">Name</div>
|
|
<div className="text-gray-400 font-medium text-[13px]">
|
|
{userData.name}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row: Email */}
|
|
<div className="flex py-1">
|
|
<div className="text-gray-500 font-medium text-[13px] w-32">Email</div>
|
|
<div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
|
|
</div>
|
|
|
|
{/* Row: Account Name */}
|
|
<div className="flex py-1">
|
|
<div className="text-gray-500 font-medium text-[13px] w-32">Account name</div>
|
|
<div className="text-gray-400 font-medium text-[13px]">
|
|
{userData.account.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
);
|
|
};
|
|
|
|
export default UserProfile |