Barazo default frontend
barazo.forum
feat(web): display author avatar and name in reply cards
Shows avatar (or initial fallback), display name, and links to
user profile. Keeps h3 heading for a11y. Part of P2.8.
+24
-3
+24
-3
src/components/reply-card.tsx
+24
-3
src/components/reply-card.tsx
···
5
5
* @see specs/prd-web.md Section 4 (Topic Components)
6
6
*/
7
7
8
+
import Link from 'next/link'
8
9
import { Heart, Clock, Link as LinkIcon } from '@phosphor-icons/react/dist/ssr'
9
10
import type { Reply } from '@/lib/api/types'
10
11
import { cn } from '@/lib/utils'
···
61
62
{/* Header */}
62
63
<div className="flex items-center justify-between border-b border-border px-4 py-2">
63
64
<div className="flex items-center gap-2 text-sm">
64
-
<h3 id={headingId} className="font-medium text-foreground">
65
-
{reply.authorDid}
66
-
</h3>
65
+
<Link
66
+
href={`/u/${reply.author?.handle ?? reply.authorDid}`}
67
+
className="flex items-center gap-2 hover:text-foreground"
68
+
>
69
+
{reply.author?.avatarUrl ? (
70
+
<img
71
+
src={reply.author.avatarUrl}
72
+
alt=""
73
+
className="h-6 w-6 rounded-full object-cover"
74
+
loading="lazy"
75
+
/>
76
+
) : (
77
+
<span
78
+
className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium"
79
+
aria-hidden="true"
80
+
>
81
+
{(reply.author?.displayName ?? reply.author?.handle ?? '?')[0]?.toUpperCase()}
82
+
</span>
83
+
)}
84
+
<h3 id={headingId} className="font-medium text-foreground">
85
+
{reply.author?.displayName ?? reply.author?.handle ?? reply.authorDid}
86
+
</h3>
87
+
</Link>
67
88
<span className="text-muted-foreground" aria-hidden="true">
68
89
·
69
90
</span>