81 lines
2.3 KiB
TypeScript
81 lines
2.3 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, useEffect, useRef, 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-2 gap-2">
|
|
<div className="flex-shrink-0">
|
|
<CustomAvatar
|
|
src={post.author?.avatar}
|
|
size={50}
|
|
name={!post.author?.avatar && post.author?.showname}
|
|
ip={post?.meta?.ip}></CustomAvatar>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className={`flex-1 min-w-0 `}>
|
|
<div className="flex flex-1 justify-between ">
|
|
<div className="flex space-x-2">
|
|
<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=" py-0.5 px-2 text-xs 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 mt-1"
|
|
style={{
|
|
padding: 0,
|
|
}}
|
|
dangerouslySetInnerHTML={{
|
|
__html: post.content || "",
|
|
}}
|
|
/>
|
|
<PostResources post={post}></PostResources>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|