From 42a46b93d3257b4a858890bde80bd948d81be05e Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Thu, 27 Mar 2025 14:42:41 +0000
Subject: [PATCH] Update heading component

---
 components/ui/Heading.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/ui/Heading.tsx b/components/ui/Heading.tsx
index 3ba0b7d..c5141a6 100644
--- a/components/ui/Heading.tsx
+++ b/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>
     )
 }
\ No newline at end of file