82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import {
|
|
FiGrid,
|
|
FiInfo,
|
|
FiMessageSquare,
|
|
FiPackage,
|
|
FiSettings,
|
|
} from 'react-icons/fi';
|
|
|
|
import { Button } from '@components/generic/Button';
|
|
import { routes, useRoute } from '@core/router';
|
|
|
|
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
|
|
|
export type NavigationProps = DefaultDivProps;
|
|
|
|
export const Navigation = ({
|
|
onClick,
|
|
className,
|
|
...props
|
|
}: NavigationProps): JSX.Element => {
|
|
const route = useRoute();
|
|
return (
|
|
<div
|
|
className={`px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`}
|
|
{...props}
|
|
>
|
|
<div onClick={onClick}>
|
|
<Button
|
|
icon={<FiMessageSquare className="w-6 h-6" />}
|
|
active={route.name === 'messages'}
|
|
className="w-full md:w-auto"
|
|
{...routes.messages().link}
|
|
>
|
|
Messages
|
|
</Button>
|
|
</div>
|
|
<div onClick={onClick}>
|
|
<Button
|
|
icon={<FiGrid className="w-6 h-6" />}
|
|
className="w-full md:w-auto"
|
|
active={route.name === 'nodes'}
|
|
{...routes.nodes().link}
|
|
>
|
|
Nodes
|
|
</Button>
|
|
</div>
|
|
<div onClick={onClick}>
|
|
<Button
|
|
icon={<FiPackage className="w-6 h-6" />}
|
|
className="w-full md:w-auto"
|
|
active={route.name === 'plugins'}
|
|
{...routes.plugins().link}
|
|
>
|
|
Plugins
|
|
</Button>
|
|
</div>
|
|
<div onClick={onClick}>
|
|
<Button
|
|
icon={<FiSettings className="w-6 h-6" />}
|
|
className="w-full md:w-auto"
|
|
active={route.name === 'settings'}
|
|
{...routes.settings().link}
|
|
>
|
|
Settings
|
|
</Button>
|
|
</div>
|
|
<div onClick={onClick}>
|
|
<Button
|
|
icon={<FiInfo className="w-6 h-6" />}
|
|
className="w-full md:w-auto"
|
|
active={route.name === 'about'}
|
|
{...routes.about().link}
|
|
>
|
|
About
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|