Use Headless UI & get visual message ack's working

2021-05-09 19:23:13 +10:00
parent d6be17a789
commit 50c276b9bc
21 changed files with 831 additions and 9433 deletions
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Disclosure } from '@headlessui/react';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  UsersIcon,
+} from '@heroicons/react/outline';
+import type { Types } from '@meshtastic/meshtasticjs';
+
+import type { languageTemplate } from '../../../App';
+import Node from './Node';
+
+interface NodesProps {
+  isReady: boolean;
+  nodes: Types.NodeInfoPacket[];
+  translations: languageTemplate;
+  myId: number;
+}
+
+const Nodes = (props: NodesProps) => {
+  return (
+    <Disclosure>
+      {({ open }) => (
+        <>
+          <Disclosure.Button className="flex rounded-t-md w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex">
+              <UsersIcon className="my-auto mr-2 w-5 h-5" />
+              {props.translations.nodes_title}
+            </div>
+            {open ? (
+              <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
+            ) : (
+              <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
+            )}
+          </Disclosure.Button>
+          <Disclosure.Panel className="shadow-inner">
+            {props.nodes.length ? (
+              props.nodes.map((node, index) => (
+                <Node key={index} node={node} myId={props.myId} />
+              ))
+            ) : (
+              <div className="flex border-b border-gray-300">
+                <div className="m-auto p-3 text-gray-500">
+                  {props.translations.no_nodes_message}
+                </div>
+              </div>
+            )}
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+};
+
+export default Nodes;