Make Unsupported Connection Links Clickable (#55)

* Initial commit

* Required disabled message for TabType

* Fixed build failure due to required types

* Revert setting changes

.vscode/settings.json

@@ -3,4 +3,4 @@
   "editor.quickSuggestions": {
     "strings": true
   }
-}
+}

src/components/NewDevice.tsx

@@ -14,22 +14,23 @@ export const NewDevice = () => {
       icon: <FiBluetooth className="h-4" />,
       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",
+      disabledMessage: "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,
+      disabledMessage: "Unsuported connection method"
     },
     {
       name: "Serial",
       icon: <FiTerminal className="h-4" />,
       element: 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",
+      disabledMessage: "Web Serial is currently only supported by Chromium-based browsers",
+      disabledLink: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility"
     },
   ]);
 

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>
         ))}