70 lines
2.3 KiB
TypeScript
Executable File
70 lines
2.3 KiB
TypeScript
Executable File
import {UserAvatar} from '@common/ui/images/user-avatar';
|
|
import {ProfileDescription} from '@app/profile/header/profile-description';
|
|
import {FollowButton} from '@common/users/follow-button';
|
|
import React from 'react';
|
|
import {useAuth} from '@common/auth/use-auth';
|
|
import {User} from '@common/auth/user';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import {EditIcon} from '@common/icons/material/Edit';
|
|
import {EditUserProfileDialog} from '@app/profile/edit-user-profile-dialog';
|
|
import {ProfileStatsList} from '@app/profile/header/profile-stats-list';
|
|
import {ProfileLinks} from '@app/profile/header/profile-links';
|
|
import {Chip} from '@common/ui/forms/input-field/chip-field/chip';
|
|
|
|
interface Props {
|
|
user: User;
|
|
}
|
|
export function ProfilePageHeader({user}: Props) {
|
|
const {user: currentUser} = useAuth();
|
|
return (
|
|
<div className="flex flex-col md:flex-row items-center gap-24">
|
|
<UserAvatar user={user} circle size="w-140 h-140" />
|
|
<div className="flex-auto">
|
|
<div className="flex items-center mb-8 gap-8">
|
|
<h1 className="text-2xl font-bold">{user.display_name}</h1>
|
|
{user.is_pro && (
|
|
<Chip size="xs" color="primary" radius="rounded" className="mt-2">
|
|
<Trans message="PRO" />
|
|
</Chip>
|
|
)}
|
|
</div>
|
|
<ProfileDescription profile={user.profile} />
|
|
<div className="flex items-center gap-14 mt-12">
|
|
{currentUser?.id !== user.id && (
|
|
<FollowButton
|
|
variant="outline"
|
|
color="primary"
|
|
size="xs"
|
|
user={user}
|
|
/>
|
|
)}
|
|
{currentUser?.id === user.id && <EditButton user={user} />}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<ProfileStatsList user={user} />
|
|
<ProfileLinks
|
|
links={user.links}
|
|
className="flex-shrink-0 ml-auto mt-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface EditButtonProps {
|
|
user: User;
|
|
}
|
|
function EditButton({user}: EditButtonProps) {
|
|
return (
|
|
<DialogTrigger type="modal">
|
|
<Button variant="outline" size="xs" startIcon={<EditIcon />}>
|
|
<Trans message="Edit profile" />
|
|
</Button>
|
|
<EditUserProfileDialog user={user} />
|
|
</DialogTrigger>
|
|
);
|
|
}
|