import React, {Children} from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import {useRouter} from 'next/router'; import clsx from 'clsx'; import {contains} from 'ramda'; const ActiveLink = ({children, activeClassName, exact, ...props}) => { const {pathname, asPath} = useRouter(); const child = Children.only(children); const childClassName = child.props.className || ''; const className = do { const className = clsx(childClassName, activeClassName); if (exact && props.as) { if (contains(props.as, asPath.replace(/[\?#].*/, ''))) { return className; } return childClassName; } return pathname === props.href ? className : childClassName; }; return ( <Link {...props}> {React.cloneElement(child, { className: className || null, })} </Link> ); }; ActiveLink.propTypes = { activeClassName: PropTypes.string, exact: PropTypes.bool, }; ActiveLink.defaultProps = { activeClassName: 'active text-blue-600', }; export default ActiveLink;