update 31/01

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

@@ -1,30 +1,57 @@
-export default function ProductDescription() {
+'use client';
+import { useState, useEffect, useRef } from "react";
+import parse from 'html-react-parser';
+
+export default function ProductDescription( {name, description}:any ) {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const [isOverflow, setIsOverflow] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+
+    useEffect(() => {
+        if (contentRef.current) {
+            if (contentRef.current.scrollHeight > 700) {
+                setIsOverflow(true);
+            }
+        }
+    }, [description]);
+
+    const handleCollapse = () => {
+        setExpanded(false);
+
+        containerRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+        });
+    };
+
     return (
-        <div className="pd-box-group bg-white mb-6 p-8 pt-6 rounded-[24px]">
+        <div className="pd-box-group bg-white mb-6 p-8 pt-6 rounded-[24px]" ref={containerRef}>
             <p className="group-title border-b border-[#D0D8E3] leading-[31px] font-600 text-24 mb-4 pb-4">
-                Đánh giá HHPC CORE i7 14700 | 32G DDR5 | NVIDIA RTX 3060 12G{" "}
+                Đánh giá {name}
             </p>
-            <div className="js-static-container static-container leading-[135%]">
-                <div className="js-static-content static-content text-16 leading-[22px] text-justify">
-
+            
+            <div className="js-static-container static-container leading-[135%]"  ref={contentRef}>
+                <div className={`static-content text-16 leading-[22px] text-justify transition-all duration-300
+                        ${!expanded && isOverflow ? 'max-h-[700px] overflow-hidden' : ''}
+                    `}>
+                    {parse(description)}
                 </div>
 
-                <div className="static-btn">
-                    <button
-                        type="button"
-                        aria-label="Xem thêm"
-                        className="js-showmore-button"
-                    >
-                        Xem thêm <i className="bx bx-chevron-down" />
-                    </button>
-                    <button
-                        type="button"
-                        aria-label="Thu gọn"
-                        className="js-showless-button"
-                    >
-                        Thu gọn <i className="bx bx-chevron-up" />
-                    </button>
-                </div>
+                {isOverflow && (
+                    <div className="static-btn mt-4 flex justify-center">
+                        {!expanded ? (
+                            <button onClick={() => setExpanded(true)}>
+                                Xem thêm <i className="bx bx-chevron-down" />
+                            </button>
+                        ) : (
+                            <button onClick={handleCollapse}>
+                                Thu gọn <i className="bx bx-chevron-up" />
+                            </button>
+                        )}
+                    </div>
+                )}
             </div>
         </div>
     )