Merge pull request #152 from HoomanHQ/dharamveer

Update DescriptionExpand component and project-card.astro file

src/components/ecosystem-pages/description-expand.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
+
+const DescriptionExpand = ({ description }: any) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [linesGreater, setLinesGreater] = useState(false);
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const el = ref.current;
+      const style = window.getComputedStyle(el, null);
+      const lineHeight = parseInt(style.getPropertyValue("line-height"));
+      const height = parseInt(style.getPropertyValue("height"));
+      const lines = height / 20;
+      console.log(lines, description?.split(" ")?.[0]);
+
+      if (lines > 3) {
+        setLinesGreater(true);
+      }
+    }
+  }, [ref, description]);
+
+  console.log(linesGreater);
+
+  return (
+    <div className="relative">
+      <p
+        ref={ref}
+        className="pointer-events-none absolute w-full text-sm font-medium leading-[20px] opacity-0"
+        dangerouslySetInnerHTML={{ __html: description }}
+      ></p>
+      <div className="hidden md:block">
+        {linesGreater ? (
+          <HoverCard openDelay={500}>
+            <HoverCardTrigger>
+              <p
+                dangerouslySetInnerHTML={{ __html: description }}
+                className="mt-6 line-clamp-3 cursor-pointer text-sm font-medium leading-[20px] text-cardGray"
+              ></p>
+            </HoverCardTrigger>
+            <HoverCardContent className="p-5" align="start">
+              <p
+                dangerouslySetInnerHTML={{ __html: description }}
+                className=" max-w-[16rem] text-sm font-medium leading-[20px] text-cardGray"
+              ></p>
+            </HoverCardContent>
+          </HoverCard>
+        ) : (
+          <p
+            dangerouslySetInnerHTML={{ __html: description }}
+            className="mt-6 line-clamp-3 cursor-pointer text-sm font-medium leading-[20px] text-cardGray"
+          ></p>
+        )}
+      </div>
+      <div className="md:hidden">
+        <p
+          dangerouslySetInnerHTML={{ __html: description }}
+          className={`mt-6 text-sm font-medium leading-[20px] text-cardGray ${
+            isExpanded ? "line-clamp-none" : "line-clamp-3"
+          }`}
+        ></p>
+        {linesGreater && (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="mt-2 text-sm font-medium text-primary"
+          >
+            {isExpanded ? "Read less" : "Read more"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DescriptionExpand;

src/components/ecosystem-pages/project-card.astro

@@ -2,6 +2,7 @@
 // Import the Image component from "astro:assets".
 import { Image } from "astro:assets";
 import { DiscordIcon, GithubIcon, TwitterIcon } from "../header/icons";
+import DescriptionExpand from "./description-expand";
 
 // Destructure props for easier access.
 const {
@@ -128,10 +129,7 @@ const {
           </div>
         )
       }
-      <p
-        class="mt-6 line-clamp-3 text-sm font-medium leading-[20px] text-cardGray"
-        set:html={description}
-      />
+      <DescriptionExpand description={description} client:load />
     </div>
   </div>
 </div>