77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import { PostDto, VisitType } from "@nice/common";
|
|
import { motion } from "framer-motion";
|
|
import dayjs from "dayjs";
|
|
|
|
import { Avatar } from "antd";
|
|
import { useVisitor } from "@nice/client";
|
|
import { useContext, useState } from "react";
|
|
import { PostDetailContext } from "./context/PostDetailContext";
|
|
import { LikeFilled, LikeOutlined } from "@ant-design/icons";
|
|
import PostLikeButton from "./PostHeader/PostLikeButton";
|
|
import { CustomAvatar } from "@web/src/components/presentation/CustomAvatar";
|
|
import PostResources from "./PostResources";
|
|
|
|
export default function PostCommentCard({
|
|
post,
|
|
index,
|
|
isReceiverComment,
|
|
}: {
|
|
post: PostDto;
|
|
index: number;
|
|
isReceiverComment: boolean;
|
|
}) {
|
|
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 gap-4">
|
|
<div className="flex-shrink-0">
|
|
<CustomAvatar
|
|
src={post.author?.avatar}
|
|
size={40}
|
|
name={
|
|
!post.author?.avatar && post.author?.showname
|
|
}></CustomAvatar>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex flex-1 justify-between ">
|
|
<div className="flex space-x-2" style={{ height: 40 }}>
|
|
<span className="flex font-medium text-slate-900">
|
|
{post.author?.showname || "匿名用户"}
|
|
</span>
|
|
<span className="flex text-sm text-slate-500">
|
|
{dayjs(post?.createdAt).format(
|
|
"YYYY-MM-DD HH:mm"
|
|
)}
|
|
</span>
|
|
{isReceiverComment && (
|
|
<div className=" ">
|
|
<span className=" px-2 text-sm rounded-full bg-blue-100 text-blue-800">
|
|
官方回答
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* 添加有帮助按钮 */}
|
|
<div>
|
|
<div className="flex justify-center items-center gap-2">
|
|
<span className=" text-sm text-slate-500">{`#${index + 1}`}</span>
|
|
<PostLikeButton post={post}></PostLikeButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="ql-editor text-slate-800"
|
|
style={{
|
|
padding: 0,
|
|
}}
|
|
dangerouslySetInnerHTML={{ __html: post.content || "" }}
|
|
/>
|
|
<PostResources post={post}></PostResources>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|