92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
|
import { PostDto, VisitType } from "@nice/common";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
import { ChatBubbleLeftIcon, HeartIcon } from "@heroicons/react/24/outline";
|
||
|
|
import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
|
||
|
|
import { Avatar } from "@web/src/components/presentation/user/Avatar";
|
||
|
|
import { useVisitor } from "@nice/client";
|
||
|
|
import { useContext } from "react";
|
||
|
|
import { PostDetailContext } from "./context/PostDetailContext";
|
||
|
|
|
||
|
|
export default function PostCommentCard({
|
||
|
|
post,
|
||
|
|
index,
|
||
|
|
}: {
|
||
|
|
post: PostDto;
|
||
|
|
index: number;
|
||
|
|
}) {
|
||
|
|
const { user } = useContext(PostDetailContext);
|
||
|
|
const { like } = useVisitor();
|
||
|
|
|
||
|
|
async function likeThisPost() {
|
||
|
|
if (!post?.liked) {
|
||
|
|
try {
|
||
|
|
await like.mutateAsync({
|
||
|
|
data: {
|
||
|
|
visitorId: user?.id || null,
|
||
|
|
postId: post.id,
|
||
|
|
type: VisitType.LIKE,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to like post:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className="bg-white rounded-lg shadow-sm border border-slate-200 p-4"
|
||
|
|
layout>
|
||
|
|
<div className="flex items-start space-x-3">
|
||
|
|
<div className="flex-shrink-0">
|
||
|
|
<Avatar
|
||
|
|
src={post.author?.avatar}
|
||
|
|
name={post.author?.showname || "匿名用户"}
|
||
|
|
size={40}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div
|
||
|
|
className="flex items-center space-x-2"
|
||
|
|
style={{ height: 40 }}>
|
||
|
|
<span className="font-medium text-slate-900">
|
||
|
|
{post.author?.showname || "匿名用户"}
|
||
|
|
</span>
|
||
|
|
<span className="text-sm text-slate-500">
|
||
|
|
{dayjs(post?.createdAt).format("YYYY-MM-DD HH:mm")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="ql-editor text-slate-800"
|
||
|
|
style={{
|
||
|
|
padding: 0,
|
||
|
|
}}
|
||
|
|
dangerouslySetInnerHTML={{ __html: post.content || "" }}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* 添加有帮助按钮 */}
|
||
|
|
<div className="mt-3 flex items-center">
|
||
|
|
<motion.button
|
||
|
|
onClick={likeThisPost}
|
||
|
|
whileHover={{ scale: 1.05 }}
|
||
|
|
whileTap={{ scale: 0.95 }}
|
||
|
|
className={`inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-full text-sm
|
||
|
|
${
|
||
|
|
post?.liked
|
||
|
|
? "bg-blue-50 text-blue-600"
|
||
|
|
: "hover:bg-slate-50 text-slate-600"
|
||
|
|
} transition-colors duration-200`}>
|
||
|
|
{post?.liked ? (
|
||
|
|
<HeartIconSolid className="h-4 w-4 text-blue-600" />
|
||
|
|
) : (
|
||
|
|
<HeartIcon className="h-4 w-4" />
|
||
|
|
)}
|
||
|
|
<span>{post?.likes || 0} 有帮助</span>
|
||
|
|
</motion.button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|