Mahyar Khanbolooki
38 lines
998 B
TypeScript
38 lines
998 B
TypeScript
import Link from 'next/link'
|
|
import React from 'react'
|
|
import type { LinkProps } from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import clsx from 'clsx'
|
|
|
|
type Props = {
|
|
icon: React.ReactElement
|
|
value: string
|
|
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
|
|
|
|
function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
|
|
const pathname = usePathname();
|
|
const isActive = pathname === href;
|
|
|
|
return (
|
|
<Link {...restProps} href={href} className={clsx(
|
|
'flex flex-col justify-arround items-center gap-[5px] text-disabled2',
|
|
isActive && 'text-foreground',
|
|
restProps.className ?? '',
|
|
)}>
|
|
<div className={clsx(
|
|
'bg-primary text-white p-3 rounded-full',
|
|
)}>
|
|
{icon}
|
|
</div>
|
|
<span className={clsx(
|
|
'text-xs2 text-disabled-text',
|
|
isActive && 'text-foreground'
|
|
)}>
|
|
{value}
|
|
</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default BottomNavHighlightLink
|