Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 56x 107x 107x 6x | import { MaterialSymbol } from 'material-symbols'
import Link from 'next/link'
import { Icon } from '../../Icon/Icon'
type ProfileSidebarLinkProps = (
| {
/** Link to go when you click navbar link. */
href: string
}
| {
/** Function that gets called when you click navbar link. */
onClick: () => void
}
) & {
/** The content inside the navbar link. */
children: React.ReactNode
/** Icon to show in front of the link. */
icon?: MaterialSymbol
/** Change look of link and disable it to show that it is active. */
isActive?: boolean
/** Use this to select element for testing. */
datacy?: string
}
/**
* Links in profile sidebar. Handles the to and onClick and have an active state.
*/
export const ProfileSideBarLink: React.FC<ProfileSidebarLinkProps> = ({
children,
datacy,
icon,
isActive = false,
...props
}) => {
// CSS classes
const classes = `flex items-center font-semibold gap-2 ${
isActive
? 'border-2 border-red text-red cursor-default rounded-xl p-3'
: 'border-2 border-transparent text-gray-500 hover:text-gray-700 p-3'
}`
return (
<>
{/* Link with href */}
{'href' in props && (
<Link
datacy={datacy}
className={classes}
href={isActive ? '' : props.href}
onClick={isActive ? (event) => event.preventDefault() : () => ''}
tabIndex={isActive ? -1 : 0}
>
<Icon icon={icon as MaterialSymbol} />
<span>{children}</span>
</Link>
)}
{/* Link Button with onClick */}
{'onClick' in props && (
<button className={classes} datacy={datacy} disabled={isActive} onClick={props.onClick}>
<Icon icon={icon as MaterialSymbol} />
{children}
</button>
)}
</>
)
}
|