32 lines
901 B
TypeScript
32 lines
901 B
TypeScript
import { useAuth } from '~/.client/hooks/useAuth';
|
|
|
|
export function UserProfile({ className }: { className?: string }) {
|
|
const { isAuthenticated, userInfo, isLoading } = useAuth();
|
|
|
|
if (!isAuthenticated) {
|
|
return <div className={className}>未登录</div>;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <div className={className}>加载中...</div>;
|
|
}
|
|
|
|
if (!userInfo) {
|
|
return <div className={className}>无法获取用户信息</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={className}>
|
|
{userInfo.picture && (
|
|
<img
|
|
src={userInfo.picture}
|
|
alt={userInfo.name || userInfo.username || '用户头像'}
|
|
className="size-10 rounded-full mb-2"
|
|
/>
|
|
)}
|
|
<h3 className="text-lg font-semibold">{userInfo.name || userInfo.username || '用户'}</h3>
|
|
{userInfo.email && <p className="text-sm text-gray-600">{userInfo.email}</p>}
|
|
</div>
|
|
);
|
|
}
|