23 lines
584 B
TypeScript
23 lines
584 B
TypeScript
import { Flex, TabNav, Text } from "@radix-ui/themes";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
|
|
type TTabLink = {
|
|
label: string;
|
|
path: string;
|
|
};
|
|
|
|
export default function TabLink(props: TTabLink) {
|
|
const { pathname } = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
const onClick = () => navigate(props.path);
|
|
|
|
return (
|
|
<TabNav.Link active={pathname === props.path} onClick={onClick}>
|
|
<Flex className="items-center gap-1">
|
|
<Text>{props.label}</Text>
|
|
</Flex>
|
|
</TabNav.Link>
|
|
);
|
|
}
|