72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* ProfileViewHeader — the read-only header used in view mode on /u/me.
|
|
* Mirrors the shape of /u/[handle]'s top block so the owner sees the same
|
|
* thing visitors do, plus an action slot for an "Edit profile" button.
|
|
*/
|
|
|
|
import Image from "next/image";
|
|
import type { User } from "@/lib/auth";
|
|
|
|
export function ProfileViewHeader({
|
|
user,
|
|
postCount,
|
|
actionSlot,
|
|
}: {
|
|
user: User;
|
|
postCount: number;
|
|
actionSlot?: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<header className="flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-6">
|
|
<Avatar src={user.avatar_url} name={user.name} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight truncate">
|
|
{user.name}
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground mt-0.5">
|
|
@{user.handle} ·{" "}
|
|
<span className="tabular-nums">{postCount}</span> post
|
|
{postCount === 1 ? "" : "s"}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Joined {new Date(user.created_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
{actionSlot ? <div className="shrink-0">{actionSlot}</div> : null}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function Avatar({ src, name }: { src: string | null; name: string }) {
|
|
if (src) {
|
|
return (
|
|
<Image
|
|
src={src}
|
|
alt={name}
|
|
width={88}
|
|
height={88}
|
|
className="size-20 sm:size-22 rounded-full object-cover ring-1 ring-foreground/10"
|
|
unoptimized
|
|
/>
|
|
);
|
|
}
|
|
const initials =
|
|
name
|
|
.split(/\s+/)
|
|
.map((p) => p[0])
|
|
.slice(0, 2)
|
|
.join("")
|
|
.toUpperCase() || "?";
|
|
return (
|
|
<div className="size-20 sm:size-22 rounded-full bg-primary/15 text-primary flex items-center justify-center text-2xl font-semibold ring-1 ring-foreground/10">
|
|
{initials}
|
|
</div>
|
|
);
|
|
}
|