40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
|
import { CommentData } from "@/data/comments";
|
||
|
|
import Form from "./Form";
|
||
|
|
import CommentList from "./CommentList";
|
||
|
|
|
||
|
|
export default function Comment() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center justify-between leading-8 gap-2 mb-4">
|
||
|
|
<p className="m-0 text-18 font-500"> {CommentData.list.length} Bình luận </p>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-2 text-14 font-500 pd-comment-btn">
|
||
|
|
<button type="button" aria-label="Đánh giá"
|
||
|
|
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-8 hover:border-[#0678DB] hover:text-[#0678DB] current"
|
||
|
|
> Tất cả </button>
|
||
|
|
|
||
|
|
{buildButtonFilter()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border border-[#DDDDDD] rounded-[12px] overflow-hidden js-comment-form">
|
||
|
|
<Form />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{CommentData.list.length > 0 &&
|
||
|
|
<CommentList item={CommentData.list}/>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildButtonFilter(){
|
||
|
|
const star = [5,4,3,2,1]
|
||
|
|
|
||
|
|
return star.map(item => (
|
||
|
|
<button type="button" aria-label="Đánh giá" key={item}
|
||
|
|
className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
|
||
|
|
> {item} <i className="bxr bx-star" /> </button>
|
||
|
|
))
|
||
|
|
}
|