Added IdAnchor from MdComponents

checkomkar · checkomkar · commit 13f7900965b7 · 2024-03-30T00:57:00.000+05:30
diff --git a/src/components/Glossary/GlossaryDefinition/index.tsx b/src/components/Glossary/GlossaryDefinition/index.tsx
@@ -1,11 +1,12 @@
-import { Box, Flex, Link, Text } from "@chakra-ui/react"
-import { ComponentProps, useState } from "react"
+import { ComponentProps } from "react"
+import { CiLink } from "react-icons/ci"
+import { Box, type HeadingProps, Icon, Link, Text } from "@chakra-ui/react"
 
-import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
 import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
-import { VscLink } from "react-icons/vsc"
+
+import { DEFAULT_GLOSSARY_NS } from "@/lib/constants"
 
 interface GlossaryDefinitionProps {
   term: string
@@ -24,46 +25,55 @@ const GlossaryDefinition = ({
   size = "md",
   options = { ns: DEFAULT_GLOSSARY_NS },
 }: GlossaryDefinitionProps) => {
-  const [showLink, setShowLink] = useState(false)
-  const headingStyles =
-    size === "sm"
-      ? { fontSize: "md", mt: 0, mb: 2 }
-      : { fontSize: { base: "xl", md: "2xl" } }
-
   const textStyles = size === "sm" ? { mb: 0 } : {}
 
-  const linkStyles = {
-    color: "inherit",
-    textDecoration: "none",
+  const IdAnchor = ({ id }: { id?: string }) => {
+    if (!id) return null
+    return (
+      <Link
+        href={"#" + id}
+        position="absolute"
+        insetInlineEnd="100%"
+        aria-label={id.replaceAll("-", " ") + " permalink"}
+        opacity={0}
+        _groupHover={{ opacity: 1 }}
+        _focus={{ opacity: 1 }}
+        transition="opacity 0.1s ease-in-out"
+      >
+        <Icon as={CiLink} fontSize="xl" me="1" />
+      </Link>
+    )
   }
-
-  const linkIconStyles = {
-    left: "-1.5em",
-    top: "0.8em",
-    fontSize: "0.5em",
-    color: "var(--eth-colors-primary-base)",
-    display: showLink ? "" : "none",
-    cursor: "pointer",
+  const headingPropsForAnchor = (id?: string): HeadingProps => {
+    if (!id) return {}
+    return {
+      scrollMarginTop: 28,
+      id,
+      "data-group": true,
+      position: "relative",
+    } as HeadingProps
   }
+  const commonHeadingProps = (id?: string): HeadingProps => ({
+    fontWeight: 700,
+    lineHeight: 1.4,
+    ...headingPropsForAnchor(id),
+  })
+  const Heading3 = ({ id, children, ...rest }: HeadingProps) => (
+    <OldHeading as="h3" {...commonHeadingProps(id)} fontSize="2xl" {...rest}>
+      <IdAnchor id={id} />
+      {children}
+    </OldHeading>
+  )
 
   return (
-    <Box textAlign="start" onMouseEnter={() => setShowLink(true)} onMouseLeave={() => setShowLink(false)}>
-      <OldHeading as="h3" lineHeight={1.4} id={term} {...headingStyles}>
-        <Link href={`#${term}`} {...linkStyles} _hover={{ border: 'none', textDecoration: 'none' }}>
-          <Flex pos="relative">
-            <Box pos="absolute" _hover={{ opacity: '0.8' }} {...linkIconStyles}>
-              <VscLink />
-            </Box>
-            <Box>
-              <Translation
-                id={term + "-term"}
-                options={options}
-                transform={components}
-              />
-            </Box>
-          </Flex>
-        </Link>
-      </OldHeading>
+    <Box textAlign="start">
+      <Heading3 id={term}>
+        <Translation
+          id={term + "-term"}
+          options={options}
+          transform={components}
+        />
+      </Heading3>
 
       <Text {...textStyles}>
         <Translation
