UI Overhaul (#3)

* WIP * WIP * WIP * WIP * Draw improvements, disabled user zooming * Update status indicator * Add dynamic channel name with icon * Add more settings * WIP * WIP
2021-08-15 23:41:14 +10:00
parent f898b1dd49
commit e14c628ecf
70 changed files with 1916 additions and 1644 deletions
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import Avatar from 'boring-avatars';
+
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+export interface NodeProps {
+  node: Protobuf.NodeInfo;
+}
+
+export const Node = ({
+  node,
+  ...props
+}: NodeProps & DefaultDivProps): JSX.Element => {
+  return (
+    <div
+      {...props}
+      className="flex space-x-4 items-center w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
+    >
+      <Avatar
+        size={30}
+        name={node.user?.longName ?? 'UNK'}
+        variant="beam"
+        colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
+      />
+      <div>{node.user?.longName}</div>
+    </div>
+  );
+};