63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Disclosure } from '@headlessui/react';
|
|
import {
|
|
AdjustmentsIcon,
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
} from '@heroicons/react/outline';
|
|
import type {
|
|
IBLEConnection,
|
|
IHTTPConnection,
|
|
ISerialConnection,
|
|
} from '@meshtastic/meshtasticjs';
|
|
|
|
import { TranslationContext } from '../../../translations/TranslationContext';
|
|
import Settings from './Settings';
|
|
|
|
interface DeviceProps {
|
|
isReady: boolean;
|
|
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
|
|
}
|
|
|
|
const Device = (props: DeviceProps): JSX.Element => {
|
|
const { translations } = React.useContext(TranslationContext);
|
|
return (
|
|
<Disclosure>
|
|
{({ open }) => (
|
|
<>
|
|
<Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
|
|
<div className="flex">
|
|
{open ? (
|
|
<ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
|
|
) : (
|
|
<ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
|
|
)}
|
|
<AdjustmentsIcon className="text-gray-600 my-auto mr-2 w-5 h-5" />
|
|
{translations.device_settings_title}
|
|
</div>
|
|
</Disclosure.Button>
|
|
<Disclosure.Panel>
|
|
<>
|
|
<React.Suspense
|
|
fallback={
|
|
<div className="flex border-b border-gray-300">
|
|
<div className="m-auto p-3 text-gray-500">Loading...</div>
|
|
</div>
|
|
}
|
|
>
|
|
<Settings
|
|
connection={props.connection}
|
|
isReady={props.isReady}
|
|
/>
|
|
</React.Suspense>
|
|
</>
|
|
</Disclosure.Panel>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
);
|
|
};
|
|
|
|
export default Device;
|