handle button show less/more for detail of clinic item

components/clinic/components/about/TextDetail.js

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Button } from "@mui/material";
+import MultilineLoading from "@/app/component/loading/Multiline";
+
+function TextDetail({ data }) {
+  const [isMore, setIsMore] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <MultilineLoading line={10} width="full" height={18}>
+        <p
+          className={`
+                text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
+                after:absolute after:right-0 after:bottom-0 after:h-[80px]
+                after:shadow-xl after:w-full transition-all duration-500 w-full
+                ${
+                  data?.caption?.length > 180 && isMore
+                    ? "after:bg-transparent max-h-screen"
+                    : data?.caption?.length > 180 &&
+                      "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
+                }
+            `}
+          dangerouslySetInnerHTML={{ __html: data?.caption }}
+        ></p>
+      </MultilineLoading>
+      {data?.caption?.length > 180 && (
+        <Button
+          className="!text-[#F17732] !text-[14px] !font-light !p-2"
+          onClick={() => setIsMore(!isMore)}
+          variant="text"
+        >
+          {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export default TextDetail;

components/clinic/components/about/index.js

@@ -1,45 +1,17 @@
-import { useState } from "react";
-
 import ListBime from "./ListBime";
 import Services from "./Services";
 import Images from "./images/Images";
-import { Button } from "@mui/material";
 import Specialties from "./Specialties";
 import ContentDetail from "./ContentDetail";
-import MultilineLoading from "@/app/component/loading/Multiline";
+import TextDetail from "./TextDetail";
 
 function About({ data }) {
-  const [isMore, setIsMore] = useState(false);
   console.log(data);
-
   return (
     <div className="opacity-page transition-all duration-500">
       <Images data={data} />
       <ContentDetail head={data.title}>
-        <div className="flex flex-col items-center justify-center">
+        <TextDetail data={data} />
-          <MultilineLoading line={10} width="full" height={18}>
-            <p
-              className={`
-                        text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
-                        after:absolute after:right-0 after:bottom-0 after:h-[80px]
-                        after:shadow-xl after:w-full transition-all duration-500
-                        ${
-                          isMore
-                            ? "after:bg-transparent max-h-screen"
-                            : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
-                        }
-                    `}
-              dangerouslySetInnerHTML={{ __html: data?.caption }}
-            ></p>
-          </MultilineLoading>
-          <Button
-            className="!text-[#F17732] !text-[14px] !font-light !p-2"
-            onClick={() => setIsMore(!isMore)}
-            variant="text"
-          >
-            {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
-          </Button>
-        </div>
       </ContentDetail>
       <ContentDetail head="بیمه های طرف قرارداد">
         <ListBime data={data} />