classify web

components/PagesComponent/ProductDetail/ProductDescription.jsx

@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from "react";
+import parse from "html-react-parser";
+import { t } from "@/utils";
+const ProductDescription = ({ productDetails }) => {
+  const [showFullDescription, setShowFullDescription] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const descriptionRef = useRef(null);
+
+  const translated_item = productDetails?.translated_item;
+
+  const fullDescription =
+    translated_item?.description?.replace(/\n/g, "<br />") ||
+    productDetails?.description?.replace(/\n/g, "<br />");
+
+  useEffect(() => {
+    const descriptionBody = descriptionRef.current;
+    if (descriptionBody) {
+      setIsOverflowing(
+        descriptionBody.scrollHeight > descriptionBody.clientHeight
+      );
+    }
+  }, [fullDescription]);
+
+  const toggleDescription = () => {
+    setShowFullDescription((prev) => !prev);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <span className="text-2xl font-medium">{t("description")}</span>
+      <div
+        className={`${
+          showFullDescription ? "h-[100%]" : "max-h-[72px]"
+        } max-w-full prose lg:prose-lg overflow-hidden`}
+        ref={descriptionRef}
+      >
+        {parse(fullDescription || "")}
+      </div>
+      {isOverflowing && (
+        <div className=" flex justify-center items-center">
+          <button
+            onClick={toggleDescription}
+            className="text-primary font-bold text-base"
+          >
+            {showFullDescription ? t("seeLess") : t("seeMore")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductDescription;