r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2025-04-19 12:24:46 +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) { export function Heading({as: Component = 'h1', children = null}: HeadingProps) {
const ref = useRef<HTMLAnchorElement>(null); const ref = useRef<HTMLAnchorElement>(null)
const headingText = children?.toString() || '' const headingText = children?.toString() || ''
useEffect(() => { useEffect(() => {
@ -20,9 +20,9 @@ export function Heading({as: Component = 'h1', children = null}: HeadingProps) {
}, []) }, [])
return ( return (
<Component id={createSlug(headingText)} className="flex group"> <Component id={createSlug(headingText)} className="group">
{children} {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> </Component>
) )
} }