You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.7 KiB
118 lines
3.7 KiB
import { CogIcon, UserIcon } from '@heroicons/react/solid';
|
|
import Link from 'next/link';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import type { User } from '../../../hooks/useUser';
|
|
import { Permission, useUser } from '../../../hooks/useUser';
|
|
import Button from '../../Common/Button';
|
|
|
|
const messages = defineMessages({
|
|
settings: 'Edit Settings',
|
|
profile: 'View Profile',
|
|
joindate: 'Joined {joindate}',
|
|
userid: 'User ID: {userid}',
|
|
});
|
|
|
|
interface ProfileHeaderProps {
|
|
user: User;
|
|
isSettingsPage?: boolean;
|
|
}
|
|
|
|
const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
|
|
const intl = useIntl();
|
|
const { user: loggedInUser, hasPermission } = useUser();
|
|
|
|
const subtextItems: React.ReactNode[] = [
|
|
intl.formatMessage(messages.joindate, {
|
|
joindate: intl.formatDate(user.createdAt, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
}),
|
|
}),
|
|
];
|
|
|
|
if (hasPermission(Permission.MANAGE_REQUESTS)) {
|
|
subtextItems.push(intl.formatMessage(messages.userid, { userid: user.id }));
|
|
}
|
|
|
|
return (
|
|
<div className="relative z-40 mt-6 mb-12 lg:flex lg:items-end lg:justify-between lg:space-x-5">
|
|
<div className="flex items-end justify-items-end space-x-5">
|
|
<div className="flex-shrink-0">
|
|
<div className="relative">
|
|
<img
|
|
className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
|
|
src={user.avatar}
|
|
alt=""
|
|
/>
|
|
<span
|
|
className="absolute inset-0 rounded-full shadow-inner"
|
|
aria-hidden="true"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div className="pt-1.5">
|
|
<h1 className="mb-1 flex flex-col sm:flex-row sm:items-center">
|
|
<Link
|
|
href={
|
|
user.id === loggedInUser?.id ? '/profile' : `/users/${user.id}`
|
|
}
|
|
>
|
|
<a className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-lg font-bold text-transparent hover:to-purple-200 sm:text-2xl">
|
|
{user.displayName}
|
|
</a>
|
|
</Link>
|
|
{user.email && user.displayName.toLowerCase() !== user.email && (
|
|
<span className="text-sm text-gray-400 sm:ml-2 sm:text-lg">
|
|
({user.email})
|
|
</span>
|
|
)}
|
|
</h1>
|
|
<p className="text-sm font-medium text-gray-400">
|
|
{subtextItems.reduce((prev, curr) => (
|
|
<>
|
|
{prev} | {curr}
|
|
</>
|
|
))}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="justify-stretch mt-6 flex flex-col-reverse space-y-4 space-y-reverse lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-3 lg:space-x-reverse">
|
|
{(loggedInUser?.id === user.id ||
|
|
(user.id !== 1 && hasPermission(Permission.MANAGE_USERS))) &&
|
|
!isSettingsPage ? (
|
|
<Link
|
|
href={
|
|
loggedInUser?.id === user.id
|
|
? `/profile/settings`
|
|
: `/users/${user.id}/settings`
|
|
}
|
|
passHref
|
|
>
|
|
<Button as="a">
|
|
<CogIcon />
|
|
<span>{intl.formatMessage(messages.settings)}</span>
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
isSettingsPage && (
|
|
<Link
|
|
href={
|
|
loggedInUser?.id === user.id ? `/profile` : `/users/${user.id}`
|
|
}
|
|
passHref
|
|
>
|
|
<Button as="a">
|
|
<UserIcon />
|
|
<span>{intl.formatMessage(messages.profile)}</span>
|
|
</Button>
|
|
</Link>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfileHeader;
|