refactor: migrate IdAnchor to tw

Author: wackerow

src/components/Glossary/GlossaryDefinition/index.tsx

@@ -31,7 +31,7 @@ const GlossaryDefinition = ({
   return (
     <Stack className="mb-8 items-stretch gap-4 text-start">
       <h4
-        className={term ? "relative scroll-mt-28" : ""}
+        className={term ? "group relative scroll-mt-28" : ""}
         {...(term ? { "data-group": true, id: term } : {})}
       >
         <IdAnchor id={term} />

src/components/IdAnchor.tsx

@@ -1,22 +1,17 @@
 import { CiLink } from "react-icons/ci"
 
-import Link from "@/components/Link"
+import { BaseLink } from "@/components/ui/Link"
 
 const IdAnchor = ({ id }: { id?: string }) => {
   if (!id) return null
   return (
-    <Link
-      href={"#" + id}
-      position="absolute"
-      insetInlineEnd="100%"
+    <BaseLink
+      className="absolute end-full flex h-full items-center opacity-0 transition-opacity duration-100 ease-in-out focus:opacity-100 group-hover:opacity-100"
       aria-label={id.replaceAll("-", " ") + " permalink"}
-      opacity={0}
-      _groupHover={{ opacity: 1 }}
-      _focus={{ opacity: 1 }}
-      transition="opacity 0.1s ease-in-out"
+      href={"#" + id}
     >
       <CiLink className="me-1 text-xl" />
-    </Link>
+    </BaseLink>
   )
 }
 

src/components/MdComponents/index.tsx

@@ -36,7 +36,7 @@ export const commonHeadingAttributes = (className: string, id?: string) => ({
   id,
   className: cn(
     "font-bold leading-xs my-8",
-    id && "scroll-mt-28 relative",
+    id && "scroll-mt-28 relative group",
     className
   ),
   "data-group": !!id || undefined,