update 2/2/2026

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

@@ -0,0 +1,45 @@
+'use client';
+import { useState } from "react";
+import StarPercent from "./StarPercent";
+import ReviewForm from "./Form"
+import ReviewList from "./ReviewList";
+
+export default function Review( {item} : any ) {
+
+    const [ show, setShow ] = useState(false);
+
+    return (
+        <>
+        <div className={`pd-rating-conatiner mb-9 ${show ? 'active' : ''}`} id="js-pd-rating">
+            <div className="flex flex-wrap justify-between gap-6">
+                <div className="w-[200px] text-center">
+                    <p className="font-600 text-[40px] leading-[48px] mb-2"> {item.summary.avgRate}.0 </p>
+                    <p className="my-2 text-[#6B7280]"> {item.summary.total} lượt đánh giá </p>
+                    <i className={`star star-${item.summary.avgRate}`} />
+
+                    <button
+                        className="rating-btn block h-10 w-full text-white text-14 font-500 rounded-[30px] bg-btn uppercase mt-3"
+                        type="button"
+                        aria-label="đánh giá"
+                        onClick={ () =>  setShow(show => !show) }
+                    />
+                </div>
+
+                <div className="w-[calc(100%_-_224px)] text-14 font-500 leading-[18px] flex flex-col gap-4">
+                    <StarPercent item={item.summary} />                    
+                </div>
+            </div>
+
+            <div className="pd-rating-form mt-8 hidden">
+                <ReviewForm  />                
+            </div>
+
+            {item.list.length > 0 && 
+                <div className="text-14 leading-[18px] mt-4">
+                    <ReviewList item={item.list}/>                    
+                </div>
+            }
+        </div>
+        </>
+    )
+}