58 lines
1.8 KiB
TypeScript
58 lines
1.8 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 }) => {
|
|
return (
|
|
<div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6">
|
|
{/* Profile Picture */}
|
|
<div className="flex-shrink-0 text-center">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 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 w-full">
|
|
{/* Row: Name */}
|
|
<div className="flex flex-col sm:flex-row py-1">
|
|
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div>
|
|
<div className="text-gray-400 font-medium text-[13px]">{userData.name}</div>
|
|
</div>
|
|
|
|
{/* Row: Email */}
|
|
<div className="flex flex-col sm:flex-row py-1">
|
|
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Email</div>
|
|
<div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
|
|
</div>
|
|
|
|
{/* Row: Account Name */}
|
|
<div className="flex flex-col sm:flex-row py-1">
|
|
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
|
|
<div className="text-gray-400 font-medium text-[13px]">
|
|
{userData.account.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserProfile;
|