57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import { ThumbsUp } from "lucide-react";
|
|
import type { Comment, User } from "../types";
|
|
import { formatRelativeTime } from "../utils";
|
|
import { CommentText } from "./CommentText";
|
|
|
|
interface CommentListProps {
|
|
author: User;
|
|
createdAt: string | Date;
|
|
comments: Comment[];
|
|
}
|
|
|
|
export function CommentList({ author, createdAt, comments }: CommentListProps) {
|
|
return (
|
|
<>
|
|
<header className="flex items-center gap-4 mb-5">
|
|
<div className="size-10 rounded-full overflow-hidden bg-zinc-700/60">
|
|
{author.avatar_url ? (
|
|
<img src={author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
|
|
) : null}
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-white/95 text-sm sm:text-base">{author.nickname}</div>
|
|
<div className="text-xs text-white/50" title={new Date(createdAt).toLocaleString()}>
|
|
发布于 {formatRelativeTime(createdAt)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<ul className="space-y-4 sm:space-y-5">
|
|
{comments.map((c) => (
|
|
<li key={c.cid} className="flex items-start gap-3 sm:gap-4">
|
|
<div className="size-8 rounded-full overflow-hidden bg-zinc-700/60 shrink-0">
|
|
{c.user.avatar_url ? (
|
|
<img src={c.user.avatar_url} alt="avatar" className="w-full h-full object-cover" />
|
|
) : null}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium text-white/95 text-sm">{c.user.nickname}</span>
|
|
<span className="text-xs text-white/50">{formatRelativeTime(c.created_at)}</span>
|
|
</div>
|
|
<p className="mt-1 text-sm leading-relaxed text-white/90 break-words">
|
|
<CommentText text={c.text} />
|
|
</p>
|
|
<div className="mt-2 inline-flex items-center gap-1 text-xs text-white/70">
|
|
<ThumbsUp size={14} />
|
|
<span>{c.digg_count}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
{comments.length === 0 ? <li className="text-sm text-white/60">暂无评论</li> : null}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|