Update package-lock.json and package.json with @radix-ui/react-popove…

…r version 1.0.7

package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@tailwindcss/typography": "^0.5.10",

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

@@ -5,10 +5,16 @@ import {
   HoverCardTrigger,
 } from "../ui/hover-card";
 
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover-card";
+
 const DescriptionExpand = ({ description }: any) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [linesGreater, setLinesGreater] = useState(false);
-
+  const [open, setOpen] = useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -35,7 +41,7 @@ const DescriptionExpand = ({ description }: any) => {
         className="pointer-events-none absolute w-full text-sm font-medium leading-[20px] opacity-0"
         dangerouslySetInnerHTML={{ __html: description }}
       ></p>
-      <div className="hidden md:block">
+      <div className="hidden lg:block">
         {linesGreater ? (
           <HoverCard openDelay={500}>
             <HoverCardTrigger>
@@ -44,7 +50,7 @@ const DescriptionExpand = ({ description }: any) => {
                 className="mt-6 line-clamp-3 cursor-pointer text-sm font-medium leading-[20px] text-cardGray"
               ></p>
             </HoverCardTrigger>
-            <HoverCardContent className="p-5" align="start">
+            <HoverCardContent className="p-5" align="start" alignOffset={50}>
               <p
                 dangerouslySetInnerHTML={{ __html: description }}
                 className=" max-w-[16rem] text-sm font-medium leading-[20px] text-cardGray"
@@ -58,6 +64,34 @@ const DescriptionExpand = ({ description }: any) => {
           ></p>
         )}
       </div>
+
+      {/* tablet */}
+      <div className="hidden md:block lg:hidden">
+        {linesGreater ? (
+          <>
+            <Popover>
+              <PopoverTrigger>
+                <p
+                  dangerouslySetInnerHTML={{ __html: description }}
+                  className="mt-6 line-clamp-3  cursor-pointer text-left text-sm font-medium leading-[20px] text-cardGray"
+                ></p>
+              </PopoverTrigger>
+              <PopoverContent className="max-w-[25rem]  bg-background2">
+                <p
+                  dangerouslySetInnerHTML={{ __html: description }}
+                  className=" text-sm font-medium leading-[20px] text-cardGray"
+                ></p>
+              </PopoverContent>
+            </Popover>
+          </>
+        ) : (
+          <p
+            dangerouslySetInnerHTML={{ __html: description }}
+            className="mt-6 line-clamp-3 cursor-pointer text-sm font-medium leading-[20px] text-cardGray"
+          ></p>
+        )}
+      </div>
+      {/* mobile */}
       <div className="md:hidden">
         <p
           dangerouslySetInnerHTML={{ __html: description }}

src/components/ui/popover-card.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };