update 03/02

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

@@ -1,8 +1,17 @@
+'use client';
+import { useState, useMemo } from "react";
+
 import { CommentData } from "@/data/comments";
 import Form from "./Form";
 import CommentList from "./CommentList";
 
 export default function Comment() {
+    const [star, setStar] = useState<number | null>(null); 
+    
+    const filteredComments = useMemo(() => {
+        if (star === null) return CommentData.list;        
+        return CommentData.list.filter(item => Number(item.rate) === star);
+    }, [star]);
 
     return (
         <div>
@@ -10,31 +19,35 @@ export default function Comment() {
                 <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>
+                    <button type="button"
+                        className={`h-8 border rounded-[40px] px-8
+                            ${star === null ? 'border-[#0678DB] text-[#0678DB]' : 'border-[#D1D5DB]'}`}
+                        onClick={() => setStar(null)}
+                    >
+                        Tất cả
+                    </button>
 
-                    {buildButtonFilter()}
+                    {[5,4,3,2,1].map(s => (
+                        <button type="button"
+                            key={s}
+                            className={`h-8 border rounded-[40px] px-4 flex items-center gap-[3px]
+                                ${star === s ? 'border-[#0678DB] text-[#0678DB]' : 'border-[#D1D5DB]'}`}
+                            onClick={() => setStar(s)}
+                        >
+                            {s} <i className="bxr bx-star" />
+                        </button>
+                    ))}
                 </div>
+
             </div>
 
             <div className="border border-[#DDDDDD] rounded-[12px] overflow-hidden js-comment-form">
                 <Form />
             </div>            
 
-            {CommentData.list.length > 0 &&
-                <CommentList item={CommentData.list}/>
-            }
+            {filteredComments.length > 0 && (
+                <CommentList item={filteredComments} />
+            )}
         </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>
-    ))
 }