Merge branch 'master' of github.com:meshtastic/meshtastic-web

src/components/NewDevice.tsx

@@ -15,13 +15,16 @@ export const NewDevice = () => {
       element: BLE,
       disabled: !navigator.bluetooth,
       disabledMessage:
-        "WebBluetooth is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
+        "Web Bluetooth is currently only supported by Chromium-based browsers",
+      disabledLink:
+        "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility"
     },
     {
       name: "HTTP",
       icon: <FiWifi className="h-4" />,
       element: HTTP,
-      disabled: false
+      disabled: false,
+      disabledMessage: "Unsuported connection method"
     },
     {
       name: "Serial",

src/components/layout/page/TabbedContent.tsx

@@ -10,6 +10,7 @@ export interface TabType {
   element: () => JSX.Element;
   disabled?: boolean;
   disabledMessage?: string;
+  disabledLink?: string;
 }
 
 export interface TabbedContentProps {
@@ -28,11 +29,10 @@ export const TabbedContent = ({
           <Tab key={index}>
             {({ selected }) => (
               <div
-                className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${
-                  selected
-                    ? "bg-gray-100 text-gray-700"
-                    : "text-gray-500 hover:text-gray-700"
-                }
+                className={`flex h-10 cursor-pointer gap-3 rounded-md px-3 text-sm font-medium ${selected
+                  ? "bg-gray-100 text-gray-700"
+                  : "text-gray-500 hover:text-gray-700"
+                  }
                    `}
               >
                 {entry.icon && (
@@ -55,7 +55,28 @@ export const TabbedContent = ({
             {!entry.disabled ? (
               <entry.element />
             ) : (
-              <Mono>{entry.disabledMessage}</Mono>
+              <div>
+                <Mono>
+                  {entry.disabledMessage || "This tab is disabled"}.
+                  {' '}
+                  {entry.disabledLink && (
+                    <>
+                      Click
+                      {' '}
+                      <a
+                        className="underline"
+                        target="_blank"
+                        rel="noreferrer"
+                        href={entry.disabledLink}
+                      >
+                        here
+                      </a>
+                      {' '}
+                      for more information.
+                    </>
+                  )}
+                </Mono>
+              </div>
             )}
           </Tab.Panel>
         ))}