51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Disclosure } from '@headlessui/react';
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
HashtagIcon,
|
|
} from '@heroicons/react/outline';
|
|
import { Protobuf } from '@meshtastic/meshtasticjs';
|
|
|
|
import type { languageTemplate } from '../../../App';
|
|
import Channel from './Channel';
|
|
|
|
export interface ChannelsProps {
|
|
isReady: boolean;
|
|
channels: Protobuf.Channel[];
|
|
translations: languageTemplate;
|
|
}
|
|
|
|
const Channels = (props: ChannelsProps): JSX.Element => {
|
|
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" />
|
|
)}
|
|
<HashtagIcon className="my-auto text-gray-600 mr-2 2-5 h-5" />
|
|
{props.translations.device_channels_title}
|
|
</div>
|
|
</Disclosure.Button>
|
|
<Disclosure.Panel>
|
|
<>
|
|
{props.channels.map((channel, index) => {
|
|
if (channel.role !== Protobuf.Channel_Role.DISABLED)
|
|
return <Channel key={index} channel={channel} />;
|
|
})}
|
|
</>
|
|
</Disclosure.Panel>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
);
|
|
};
|
|
|
|
export default Channels;
|