You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.8 KiB
86 lines
2.8 KiB
import React from 'react';
|
|
|
|
import { FiFileText, FiRss, FiXCircle } from 'react-icons/fi';
|
|
|
|
import { IconButton } from '@app/components/generic/IconButton.jsx';
|
|
import { useBreakpoint } from '@app/hooks/breakpoint';
|
|
import { Drawer } from '@components/generic/Drawer';
|
|
import { SidebarItem } from '@components/generic/SidebarItem';
|
|
import { Tab } from '@headlessui/react';
|
|
|
|
import { Files } from './Files';
|
|
import { RangeTest } from './RangeTest';
|
|
|
|
export const Plugins = (): JSX.Element => {
|
|
const [navOpen, setNavOpen] = React.useState(false);
|
|
|
|
const { breakpoint } = useBreakpoint();
|
|
|
|
return (
|
|
<Tab.Group>
|
|
<div className="relative flex w-full dark:text-white">
|
|
<Drawer
|
|
open={breakpoint === 'sm' ? navOpen : true}
|
|
permenant={breakpoint !== 'sm'}
|
|
onClose={(): void => {
|
|
setNavOpen(!navOpen);
|
|
}}
|
|
>
|
|
<Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
|
|
<div className="flex items-center justify-between m-8 mr-6 md:my-10">
|
|
<div className="text-4xl font-extrabold leading-none tracking-tight">
|
|
Plugins
|
|
</div>
|
|
<div className="md:hidden">
|
|
<IconButton
|
|
icon={<FiXCircle className="w-5 h-5" />}
|
|
onClick={(): void => {
|
|
setNavOpen(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Tab
|
|
onClick={(): void => {
|
|
setNavOpen(false);
|
|
}}
|
|
>
|
|
{({ selected }): JSX.Element => (
|
|
<SidebarItem
|
|
title="Range Test"
|
|
description="Test the range of your Meshtastic node"
|
|
selected={selected}
|
|
icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
|
|
/>
|
|
)}
|
|
</Tab>
|
|
<Tab
|
|
onClick={(): void => {
|
|
setNavOpen(false);
|
|
}}
|
|
>
|
|
{({ selected }): JSX.Element => (
|
|
<SidebarItem
|
|
title="File Browser"
|
|
description="HTTP only file browser"
|
|
selected={selected}
|
|
icon={<FiFileText className="flex-shrink-0 w-6 h-6" />}
|
|
/>
|
|
)}
|
|
</Tab>
|
|
</Tab.List>
|
|
</Drawer>
|
|
<div className="flex w-full">
|
|
<Tab.Panels className="flex w-full">
|
|
<Tab.Panel className="flex w-full">
|
|
<RangeTest navOpen={navOpen} setNavOpen={setNavOpen} />
|
|
</Tab.Panel>
|
|
<Tab.Panel className="flex w-full">
|
|
<Files navOpen={navOpen} setNavOpen={setNavOpen} />
|
|
</Tab.Panel>
|
|
</Tab.Panels>
|
|
</div>
|
|
</div>
|
|
</Tab.Group>
|
|
);
|
|
};
|
|
|