104 lines
3.0 KiB
TypeScript
Executable File
104 lines
3.0 KiB
TypeScript
Executable File
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 {
|
|
CheckCircleOutlined,
|
|
CheckOutlined,
|
|
LikeFilled,
|
|
LikeOutlined,
|
|
} from "@ant-design/icons";
|
|
import PostLikeButton from "./PostHeader/PostLikeButton";
|
|
import { CustomAvatar } from "@web/src/components/presentation/CustomAvatar";
|
|
import PostResources from "./PostResources";
|
|
import PostHateButton from "./PostHeader/PostHateButton";
|
|
import PostSendButton from "./PostHeader/PostSendButton";
|
|
import { getCompressedImageUrl } from "@nice/utils";
|
|
|
|
export default function PostCommentCard({
|
|
post,
|
|
index,
|
|
isReceiverComment,
|
|
}: {
|
|
post: PostDto;
|
|
index: number;
|
|
isReceiverComment: boolean;
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
className={` rounded-xl border p-6 bg-slate-100 border-white ring-white hover:ring-1 transition-all duration-300 ease-in-out`}
|
|
layout>
|
|
<div className="flex items-start space-x-2 gap-2">
|
|
<div className="flex-shrink-0">
|
|
<a href={post.author?.meta?.photoUrl}>
|
|
{/* {post.author?.meta?.photoUrl} */}
|
|
</a>
|
|
<CustomAvatar
|
|
src={post.author?.meta?.photoUrl}
|
|
size={50}
|
|
name={
|
|
!post.author?.meta?.photoUrl &&
|
|
post.author?.showname
|
|
}
|
|
randomString={
|
|
post?.meta?.signature || 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 items-center space-x-2">
|
|
<span className="flex font-medium text-slate-900">
|
|
{post?.meta?.signature ||
|
|
post.author?.showname ||
|
|
"匿名用户"}
|
|
</span>
|
|
<span className="flex text-sm text-slate-500 ">
|
|
{dayjs(post?.createdAt).format(
|
|
"YYYY-MM-DD HH:mm"
|
|
)}
|
|
</span>
|
|
{isReceiverComment && (
|
|
<span className=" text-sm text-primary flex gap-2 font-bold">
|
|
<CheckOutlined></CheckOutlined>
|
|
官方回复
|
|
</span>
|
|
)}
|
|
</div>
|
|
{/* 添加有帮助按钮 */}
|
|
<div>
|
|
<div className="flex justify-center items-center gap-2">
|
|
{isReceiverComment && (
|
|
<PostSendButton
|
|
post={post}></PostSendButton>
|
|
)}
|
|
<PostHateButton
|
|
post={post}></PostHateButton>
|
|
<PostLikeButton
|
|
post={post}></PostLikeButton>
|
|
<span className=" text-sm text-slate-500">{`#${index + 1}`}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="ql-editor text-slate-800 mt-1 text-base mb-2"
|
|
style={{
|
|
padding: 0,
|
|
}}
|
|
dangerouslySetInnerHTML={{
|
|
__html: post.content || "",
|
|
}}
|
|
/>
|
|
<PostResources post={post}></PostResources>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|