1
import type { User } from "@/shared/types";
2
import { Avatar } from "@/client/components/ui/avatar";
3
import { formatAbsoluteDate, formatRelativeDate } from "@/client/lib/format-date";
4
 
5
interface PageBylineProps {
6
  creator: Pick<User, "name" | "avatar_url"> | null;
7
  createdAt: string;
8
}
9
 
10
export function PageByline({ creator, createdAt }: PageBylineProps) {
11
  if (!creator) return null;
12
 
13
  const relative = formatRelativeDate(createdAt);
14
  const absolute = formatAbsoluteDate(createdAt);
15
 
16
  return (
17
    <div
18
      className="flex items-center gap-1.5 text-[11px] leading-none text-zinc-500"
19
      aria-label={`Created by ${creator.name} on ${absolute}`}
20
    >
21
      <Avatar name={creator.name} avatarUrl={creator.avatar_url} className="h-4 w-4 text-[9px]" />
22
      <span className="truncate text-zinc-400">{creator.name}</span>
23
      <span aria-hidden="true" className="text-zinc-700">
24
        ·
25
      </span>
26
      <time dateTime={createdAt} title={absolute}>
27
        {relative}
28
      </time>
29
    </div>
30
  );
31
}