From 41f9eae0191896e4f6b7dba38bc1a2298048a8c1 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sun, 30 Oct 2022 15:13:20 +1000
Subject: [PATCH] add diabledMessage to TabbedContent

---
 src/components/Button.tsx                    |  2 +-
 src/components/NewDevice.tsx                 | 12 ++++++++----
 src/components/layout/page/TabbedContent.tsx | 13 +++++++------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 27d47440..bdbd780d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -33,7 +33,7 @@ export const Button = ({
       disabled={disabled}
       {...rest}
     >
-      <div className="m-auto flex items-center gap-2 font-medium">
+      <div className="m-auto flex shrink-0 items-center gap-2 font-medium">
         {iconBefore}
         {children}
         {iconAfter}
diff --git a/src/components/NewDevice.tsx b/src/components/NewDevice.tsx
index fbc5f9e0..ae15f589 100644
--- a/src/components/NewDevice.tsx
+++ b/src/components/NewDevice.tsx
@@ -13,20 +13,24 @@ export const NewDevice = () => {
       name: "BLE",
       icon: <FiBluetooth className="h-4" />,
       element: BLE,
-      disabled: !navigator.bluetooth
+      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",
     },
     {
       name: "HTTP",
       icon: <FiWifi className="h-4" />,
       element: HTTP,
-      disabled: false
+      disabled: false,
     },
     {
       name: "Serial",
       icon: <FiTerminal className="h-4" />,
       element: Serial,
-      disabled: !navigator.serial
-    }
+      disabled: !navigator.serial,
+      disabledMessage:
+        "WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
+    },
   ]);
 
   return (
diff --git a/src/components/layout/page/TabbedContent.tsx b/src/components/layout/page/TabbedContent.tsx
index 86768d52..4da00ae1 100644
--- a/src/components/layout/page/TabbedContent.tsx
+++ b/src/components/layout/page/TabbedContent.tsx
@@ -1,14 +1,15 @@
 import type React from "react";
 import { Fragment } from "react";
 
-import { Tab } from "@headlessui/react";
 import { Mono } from "@app/components/Mono";
+import { Tab } from "@headlessui/react";
 
 export interface TabType {
   name: string;
   icon?: JSX.Element;
   element: () => JSX.Element;
   disabled?: boolean;
+  disabledMessage?: string;
 }
 
 export interface TabbedContentProps {
@@ -42,7 +43,7 @@ export const TabbedContent = ({
             )}
           </Tab>
         ))}
-        <div className="ml-auto">
+        <div className="ml-auto flex gap-2">
           {actions?.map((Action, index) => (
             <Action key={index} />
           ))}
@@ -51,10 +52,10 @@ export const TabbedContent = ({
       <Tab.Panels as={Fragment}>
         {tabs.map((entry, index) => (
           <Tab.Panel key={index} className="flex flex-grow">
-            {!entry.disabled ? <entry.element /> : (
-              <Mono>
-                This functionality is not supported in your browser.
-              </Mono>
+            {!entry.disabled ? (
+              <entry.element />
+            ) : (
+              <Mono>{entry.disabledMessage}</Mono>
             )}
           </Tab.Panel>
         ))}