otterscan/src/components/NavTab.tsx
2021-09-23 21:27:40 -03:00

29 lines
621 B
TypeScript

import React, { Fragment } from "react";
import { NavLink } from "react-router-dom";
import { Tab } from "@headlessui/react";
type NavTabProps = {
href: string;
};
const NavTab: React.FC<NavTabProps> = ({ href, children }) => (
<Tab as={Fragment}>
<NavLink
className={(isActive) =>
`${
isActive
? "text-link-blue border-link-blue"
: "text-gray-500 border-transparent"
} hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2`
}
to={href}
exact
replace
>
{children}
</NavLink>
</Tab>
);
export default NavTab;