r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2025-04-11 20:54:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix heading component
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m15s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-03-30 20:28:17 +01:00
parent e5eae13468
commit f4e920bff4
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/ui/Heading.tsx
View File

@ -10,7 +10,7 @@ type HeadingProps = {
}
export function Heading({as: Component = 'h1', children = null}: HeadingProps) {
const ref = useRef<HTMLAnchorElement>(null);
const ref = useRef<HTMLAnchorElement>(null)
const headingText = children?.toString() || ''
useEffect(() => {
@ -20,9 +20,9 @@ export function Heading({as: Component = 'h1', children = null}: HeadingProps) {
}, [])
return (
<Component id={createSlug(headingText)} className="flex group">
<Component id={createSlug(headingText)} className="group">
{children}
<Link className="sr-only group-hover:not-sr-only !ml-1.5" href={`#${createSlug(headingText)}`} ref={ref}></Link>
<Link className="ml-1.5 invisible group-hover:visible" href={`#${createSlug(headingText)}`} ref={ref}></Link>
</Component>
)
}