79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import { RiReplyFill, RiRobotFill } from "@remixicon/react";
|
|
import CommentForm, { type CommentFormSubmitValues } from "../comment-form";
|
|
|
|
interface CommentItemProps {
|
|
data: API.Comment.ICommentDetailData;
|
|
onSubmit: (values: CommentFormSubmitValues) => Promise<unknown>;
|
|
}
|
|
|
|
export default function CommentItem({ data, onSubmit }: CommentItemProps) {
|
|
const [active, setActive] = useState(false);
|
|
|
|
const onToggleCommentForm = () => setActive((prev) => !prev);
|
|
|
|
const onReplySubmit = (values: CommentFormSubmitValues) => {
|
|
return onSubmit(values).then(() => {
|
|
setActive(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="scroll-mt-28 mb-8 last:mb-0" id={`c${data.uuid}`}>
|
|
<div className="flex items-start gap-4 relative group">
|
|
<img
|
|
src={data.avatar || ""}
|
|
alt={data.name || ""}
|
|
className="w-12 h-12 rounded-xl bg-neutral-200 object-cover shrink-0"
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<a
|
|
className="inline-block text-pink-400 font-medium mb-1 hover:underline"
|
|
href={data.site || "#"}
|
|
target="_blank"
|
|
rel="nofollow noreferrer"
|
|
>
|
|
{data.name}
|
|
{data.is_ai_bot && (
|
|
<span className="ml-2 text-cyan-500" title="AI 机器人评论">
|
|
<RiRobotFill className="size-4" />
|
|
</span>
|
|
)}
|
|
</a>
|
|
<p className="whitespace-pre-wrap text-neutral-600 leading-relaxed">
|
|
{data.content}
|
|
{data.status === "waiting" && (
|
|
<span className="text-neutral-400">（审核中）</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<button
|
|
className="absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition-opacity text-pink-400 hover:text-pink-600 cursor-pointer"
|
|
onClick={onToggleCommentForm}
|
|
title="回复"
|
|
>
|
|
<RiReplyFill className="size-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{active && (
|
|
<div className="mt-4 ml-16">
|
|
<CommentForm
|
|
parent={data.uuid}
|
|
root={data.root || data.uuid}
|
|
onSubmit={onReplySubmit}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{data.children && data.children.length > 0 && (
|
|
<div className="mt-4 ml-4 md:ml-16 pl-4 border-l-2 border-cyan-200">
|
|
{data.children.map((item) => (
|
|
<CommentItem key={item.uuid} data={item} onSubmit={onSubmit} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|