React Next Tailwind CSS - How to create a hyperlink around custom component - reactjs

Question

In my index.tsx I have
<Header/>
In my Header.js component, I am using a HeroIcon embedded component.
export default function Header() {
return (
<header className='flex flex-col sm:flex-row m-5 justify-between items-center h-auto'>
<div className='flex flex-grow justify-evenly max-w-2xl'>
<HeaderItem title='HOME' Icon={HomeIcon} />
<HeaderItem title='ACCOUNT' Icon={UserIcon} />
In my HeaderItem.js
export default function HeaderItem({Icon,title}) {
return (
<div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20
hover:text-red">
<Icon className="h-8 mb-1 group-hover:animate-bounce"/>
<p className="opacity-0 group-hover:opacity-100 tracking-widest"> {title} </p>
</div>
)
}
As far as I understand, I can pass a ref from the Header to HeaderItem component via props and then use the Link tag.
How do I wrap that around without losing the animation?

Answer 1

OK so this works for me -
On Header.js
<HeaderItem title='HOME' Icon={HomeIcon} url="/"/>
On the HeaderItem.js
export default function HeaderItem({Icon,title, url}) {
return (
<Link href={url}>
<div className="flex flex-col items-center cursor-pointer group w-12 sm:w-20
hover:text-red">
<Icon className="h-8 mb-1 group-hover:animate-bounce"/>
<p className="opacity-0 group-hover:opacity-100 tracking-widest"> {title} </p>
</div>
</Link>
)
}