update 2/2/2026

src/components/product/detail/comments/index.tsx

@@ -0,0 +1,40 @@
+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>
+    ))
+}