misc_pterodactyl-panel/resources/scripts/components/admin/SubNavigation.tsx
2021-10-10 13:13:10 -07:00

40 lines
986 B
TypeScript

import React from 'react';
import { NavLink } from 'react-router-dom';
import tw, { styled } from 'twin.macro';
export const SubNavigation = styled.div`
${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`};
& > a {
${tw`flex flex-row items-center h-full px-4 border-b text-neutral-300 text-base whitespace-nowrap border-transparent`};
& > svg {
${tw`w-6 h-6 mr-2`};
}
&:active, &.active {
${tw`text-primary-300 border-primary-300`};
}
}
`;
interface Props {
to: string;
name: string;
}
interface PropsWithIcon extends Props {
icon: React.ComponentType;
children?: never;
}
interface PropsWithoutIcon extends Props {
icon?: never;
children: React.ReactNode;
}
export const SubNavigationLink = ({ to, name, icon: IconComponent, children }: PropsWithIcon | PropsWithoutIcon) => (
<NavLink to={to} exact>
{IconComponent ? <IconComponent/> : children}{name}
</NavLink>
);