51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
/**
|
|
* Renders the header of a profile's full lists, `/users/:username/dumps`,
|
|
* `/upvoted` and `/playlists`.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import type { ReactNode } from "react";
|
|
import { Link } from "react-router";
|
|
import type { PublicUser } from "../../../shared/user.ts";
|
|
import { Avatar } from "../shared/Avatar.tsx";
|
|
|
|
/**
|
|
* Passed to {@link ProfileSubpageHeader} by each of those pages, once it has
|
|
* loaded the profile's user.
|
|
*/
|
|
export interface ProfileSubpageHeaderProps {
|
|
/** The `:username` of the route, which the back link leads to. */
|
|
username: string;
|
|
profileUser: PublicUser;
|
|
title: string;
|
|
/** Buttons at the end of the title row. */
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Renders a link back to the profile, then the page's title beside the user's
|
|
* avatar.
|
|
*/
|
|
export function ProfileSubpageHeader(
|
|
{ username, profileUser, title, actions }: ProfileSubpageHeaderProps,
|
|
): React.JSX.Element {
|
|
return (
|
|
<div className="profile-subpage-header">
|
|
<Link to={`/users/${username}`} className="profile-subpage-back">
|
|
← {profileUser.username}
|
|
</Link>
|
|
<div className="profile-subpage-title-row">
|
|
<Avatar
|
|
userId={profileUser.id}
|
|
username={profileUser.username}
|
|
hasAvatar={!!profileUser.avatarMime}
|
|
size={36}
|
|
/>
|
|
<h1 className="profile-subpage-title">{title}</h1>
|
|
{actions}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|