refactor: extract IdAnchor to new file

prevents circular reference issues from inside MdComponents

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -1,8 +1,8 @@
 import { ComponentProps } from "react"
 import { Box, type HeadingProps, Text } from "@chakra-ui/react"
 
+import IdAnchor from "@/components/IdAnchor"
 import InlineLink from "@/components/Link"
-import { IdAnchor } from "@/components/MdComponents"
 import OldHeading from "@/components/OldHeading"
 import Translation from "@/components/Translation"
 

src/components/IdAnchor.tsx

@@ -0,0 +1,24 @@
+import { CiLink } from "react-icons/ci"
+import { Icon } from "@chakra-ui/react"
+
+import Link from "@/components/Link"
+
+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>
+  )
+}
+
+export default IdAnchor

src/components/MdComponents.tsx

@@ -1,16 +1,13 @@
 import { ComponentProps } from "react"
-import { CiLink } from "react-icons/ci"
 import {
   Badge,
   Box,
   type BoxProps,
-  calc,
   chakra,
   Divider as ChakraDivider,
   Flex,
   type FlexProps,
   type HeadingProps,
-  Icon,
   ListItem,
   OrderedList,
   Text,
@@ -25,7 +22,6 @@ import ButtonDropdown, {
 } from "@/components/ButtonDropdown"
 import { ButtonLink } from "@/components/Buttons"
 import Contributors from "@/components/Contributors"
-import Link from "@/components/Link"
 import MarkdownImage from "@/components/MarkdownImage"
 import OldHeading from "@/components/OldHeading"
 import { mdxTableComponents } from "@/components/Table"
@@ -40,6 +36,7 @@ import DocLink from "./DocLink"
 import Emoji from "./Emoji"
 import ExpandableCard from "./ExpandableCard"
 import FeaturedText from "./FeaturedText"
+import IdAnchor from "./IdAnchor"
 import InfoBanner from "./InfoBanner"
 import IssuesList from "./IssuesList"
 import LocaleDateTime from "./LocaleDateTime"
@@ -65,24 +62,6 @@ export const commonHeadingProps = (id?: string): HeadingProps => ({
   ...headingPropsForAnchor(id),
 })
 
-export 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>
-  )
-}
-
 export const Heading1 = ({ children, ...rest }: HeadingProps) => (
   <OldHeading as="h1" {...commonHeadingProps()} fontSize="2.5rem" {...rest}>
     {children}