36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Mail } from 'lucide-react';
|
|
import Markdown from 'react-markdown';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { useUserInfo } from '@/hooks/data/useUserInfo';
|
|
import { base64ToUtf8 } from '@/lib/utils';
|
|
import { EditProfileDialog } from './edit-profile-dialog';
|
|
|
|
export function MainProfile() {
|
|
const { data: user } = useUserInfo();
|
|
return (
|
|
<div className="flex flex-col w-full">
|
|
<div className="flex w-full flex-row gap-4 mt-2">
|
|
<Avatar className="size-16 rounded-full border-2 border-muted">
|
|
<AvatarImage src={user.avatar} alt={user.nickname} />
|
|
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex flex-1 flex-col justify-center">
|
|
<span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
|
|
<span className="text-[20px] text-muted-foreground" aria-hidden="true">{user.subtitle}</span>
|
|
</div>
|
|
</div>
|
|
<EditProfileDialog />
|
|
<section className="px-2 mt-4">
|
|
<div className="flex flex-row gap-2 items-center text-sm">
|
|
<Mail className="h-4 w-4 stroke-muted-foreground" />
|
|
{user.email}
|
|
</div>
|
|
</section>
|
|
<section className="rounded-md border border-muted w-full min-h-72 mt-4 p-6 prose dark:prose-invert max-w-[1012px] self-center">
|
|
{/* Bio */}
|
|
<Markdown>{base64ToUtf8(user.bio)}</Markdown>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|