41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
type ProfileHeaderProps = {
|
|
displayName: string;
|
|
username: string;
|
|
bio: string | null;
|
|
avatarUrl: string | null;
|
|
};
|
|
|
|
export function ProfileHeader({ displayName, username, bio, avatarUrl }: ProfileHeaderProps) {
|
|
const words = displayName.trim().split(/\s+/).filter(Boolean);
|
|
const initials =
|
|
words.length >= 2
|
|
? `${words[0]?.[0] ?? ""}${words[1]?.[0] ?? ""}`.toUpperCase()
|
|
: (words[0]?.slice(0, 2) ?? username.slice(0, 2)).toUpperCase();
|
|
|
|
return (
|
|
<header className="terminal-card space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt={`${displayName} avatar`}
|
|
className="h-16 w-16 rounded-full border border-border object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-full border border-border bg-panel text-lg font-semibold text-muted">
|
|
{initials}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1.5">
|
|
<h1 className="text-3xl font-bold leading-tight">{displayName}</h1>
|
|
<p className="text-sm text-muted">@{username}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{bio ? <p className="max-w-2xl text-sm leading-relaxed text-muted">{bio}</p> : null}
|
|
</header>
|
|
);
|
|
}
|