migrate GlossaryTooltip

Author: pettinarip

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -1,8 +1,6 @@
 import React, { ReactNode } from "react"
 import { useRouter } from "next/router"
-import { Box, Text, VStack } from "@chakra-ui/react"
 
-import Heading from "@/components/Heading"
 import InlineLink from "@/components/Link"
 import Tooltip, { type TooltipProps } from "@/components/Tooltip"
 import Translation from "@/components/Translation"
@@ -23,36 +21,36 @@ const GlossaryTooltip = ({
   const { asPath } = useRouter()
 
   return (
-    <Box as="span" display="inline-block">
+    <span className="inline-block">
       <Tooltip
         {...props}
         content={
-          <VStack spacing={2} align="stretch" textAlign="start">
-            <Heading as="h6">
+          <div className="flex flex-col items-stretch gap-2 text-start">
+            <h6>
               <Translation
                 id={termKey + "-term"}
                 options={{ ns: "glossary-tooltip" }}
                 // Override the default `a` tag transformation to avoid circular
                 // dependency issues
                 transform={{ a: InlineLink }}
               />
-            </Heading>
+            </h6>
             {/**
              * `as="span"` prevents hydration warnings for strings that contain
              * elements that cannot be nested inside `p` tags, like `ul` tags
              * (found in some Glossary definition).
              * TODO: Develop a better solution to handle this case.
              */}
-            <Text as="span">
+            <span>
               <Translation
                 id={termKey + "-definition"}
                 options={{ ns: "glossary-tooltip" }}
                 // Override the default `a` tag transformation to avoid circular
                 // dependency issues
                 transform={{ a: InlineLink }}
               />
-            </Text>
-          </VStack>
+            </span>
+          </div>
         }
         onBeforeOpen={() => {
           trackCustomEvent({
@@ -62,20 +60,11 @@ const GlossaryTooltip = ({
           })
         }}
       >
-        <Text
-          as="u"
-          textDecorationStyle="dotted"
-          textUnderlineOffset="3px"
-          _hover={{
-            textDecorationColor: "primary.hover",
-            color: "primary.hover",
-          }}
-          cursor="help"
-        >
+        <u className="cursor-help decoration-dotted underline-offset-3 hover:text-primary-hover hover:decoration-primary-hover">
           {children}
-        </Text>
+        </u>
       </Tooltip>
-    </Box>
+    </span>
   )
 }
 

src/components/Tooltip/index.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, useEffect } from "react"
-import { PopoverProps } from "@chakra-ui/react"
 
 import { isMobile } from "@/lib/utils/isMobile"
 
@@ -12,18 +11,13 @@ import {
 
 import { useDisclosure } from "@/hooks/useDisclosure"
 
-export interface TooltipProps extends PopoverProps {
+export type TooltipProps = {
   content: ReactNode
   children?: ReactNode
   onBeforeOpen?: () => void
 }
 
-const Tooltip = ({
-  content,
-  children,
-  onBeforeOpen,
-  // ...rest
-}: TooltipProps) => {
+const Tooltip = ({ content, children, onBeforeOpen }: TooltipProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   // Close the popover when the user scrolls.