Update heading component

components/ui/Heading.tsx

@@ -1,4 +1,6 @@
-import {ElementType, ReactNode} from 'react'
+'use client'
+
+import {ElementType, ReactNode, useEffect, useRef} from 'react'
 import {createSlug} from '@/lib/createSlug'
 import Link from 'next/link'
 
@@ -8,13 +10,19 @@ type HeadingProps = {
 }
 
 export function Heading({as: Component = 'h1', children = null}: HeadingProps) {
-    let headingText = children ? children.toString() : ''
+    const ref = useRef<HTMLAnchorElement>(null);
+    const headingText = children?.toString() || ''
+
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.innerHTML = '#'
+        }
+    }, [])
 
     return (
-        <Component id={createSlug(headingText)} className="group">
+        <Component id={createSlug(headingText)} className="flex group">
             {children}
-            <Link className="ml-1.5 group-hover:visible invisible"
-                  href={`#${createSlug(headingText)}`}>#</Link>
+            <Link className="sr-only group-hover:not-sr-only !ml-1.5" href={`#${createSlug(headingText)}`} ref={ref}></Link>
         </Component>
     )
 }