78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import { formatDate } from "@/lib/utils";
|
|
import parse from 'html-react-parser';
|
|
import CommentReply from "@/components/shared/CommentReply";
|
|
import Form from "../product/detail/comments/Form";
|
|
|
|
export default function CommentItem({ item }: any) {
|
|
const [activeFormId, setActiveFormId] = useState<number | null>(null);
|
|
|
|
const handleReply = () => {
|
|
setActiveFormId(prev =>
|
|
prev === item.id ? null : item.id
|
|
);
|
|
};
|
|
|
|
console.log('aaaaaaaaaa', item)
|
|
|
|
return (
|
|
<>
|
|
{ item.is_user_admin == 1 || item.approved == 1 &&
|
|
<div className="first:border-t first:mt-4 first:pt-4 border-[#D1D5DB] mb-5 flex gap-3 text-14 leading-[18px]">
|
|
<div className="w-10 h-10 rounded-full bg-[#9CA3AF] leading-10 text-center uppercase text-white font-600 overflow-hidden">
|
|
{ item.is_user_admin == 1
|
|
? parse(`<img src="images/avatar-admin.png" className="block w-full h-full"/>`)
|
|
: parse(`<span> ${item.user_name.substring(0,1)} </span>`)
|
|
}
|
|
</div>
|
|
|
|
<div className="w-[calc(100%_-_52px)]">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<b className="capitalize"> {item.user_name.split(' -')[0]} </b>
|
|
<i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
|
|
<span className="text-[#6B7280]"> {formatDate(item.post_time)} </span>
|
|
</div>
|
|
|
|
<i className={`star star-${item.rate}`} />
|
|
|
|
<div className="my-2"> {item.content} </div>
|
|
|
|
<div className="flex gap-2 leading-[30px]">
|
|
<button type="button" aria-label="actions"
|
|
className="group flex items-center gap-[6px] border border-[#D1D5DB] px-3 rounded-[20px] hover:border-[#0678DB] hover:text-[#0678DB]"
|
|
>
|
|
<i className="group-hover:text-[#0678DB] text-[#928FA8] bxr bx-heart" />
|
|
{item.people_like_count}
|
|
</button>
|
|
|
|
<button type="button" aria-label="actions"
|
|
className="group flex items-center gap-[6px] border border-[#D1D5DB] px-3 rounded-[20px] hover:border-[#0678DB] hover:text-[#0678DB]"
|
|
onClick={handleReply}
|
|
>
|
|
<i className="group-hover:text-[#0678DB] text-[#928FA8] bxr bx-reply-stroke" />
|
|
Trả lời
|
|
</button>
|
|
</div>
|
|
|
|
{activeFormId === item.id && (
|
|
<div className="my-2 border border-[#DDDDDD] rounded-[12px] overflow-hidden js-comment-form" id={`js-comment-form-${item.id}`}>
|
|
<Form />
|
|
</div>
|
|
)}
|
|
|
|
|
|
{ item.new_replies.length > 0 &&
|
|
<div className="bg-[#F3F4F6] rounded-[12px] overflow-hidden mt-3">
|
|
{
|
|
item.new_replies.map( (reply:any) =>
|
|
<CommentReply item={reply} key={reply.id} />)
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
} |