Added UI block for unsupported connection methods (#39)

* Initial commit

* Removed annoying space

* Updated unneeded imports

src/components/NewDevice.tsx

@@ -1,4 +1,4 @@
-import type React from "react";
+import React, { useState } from "react";
 
 import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
 
@@ -8,23 +8,26 @@ import { HTTP } from "./PageComponents/Connect/HTTP.js";
 import { Serial } from "./PageComponents/Connect/Serial.js";
 
 export const NewDevice = () => {
-  const tabs: TabType[] = [
+  const [tabs, _setTabs] = useState<TabType[]>([
     {
       name: "BLE",
       icon: <FiBluetooth className="h-4" />,
       element: BLE,
+      disabled: !navigator.bluetooth
     },
     {
       name: "HTTP",
       icon: <FiWifi className="h-4" />,
       element: HTTP,
+      disabled: false
     },
     {
       name: "Serial",
       icon: <FiTerminal className="h-4" />,
       element: Serial,
-    },
-  ];
+      disabled: !navigator.serial
+    }
+  ]);
 
   return (
     <div className="m-auto h-96 w-96">

src/components/layout/page/TabbedContent.tsx

@@ -2,6 +2,7 @@ import type React from "react";
 import { Fragment } from "react";
 
 import { Tab } from "@headlessui/react";
+import { Mono } from "@app/components/Mono";
 
 export interface TabType {
   name: string;
@@ -50,7 +51,11 @@ export const TabbedContent = ({
       <Tab.Panels as={Fragment}>
         {tabs.map((entry, index) => (
           <Tab.Panel key={index} className="flex flex-grow">
-            <entry.element />
+            {!entry.disabled ? <entry.element /> : (
+              <Mono>
+                This functionality is not supported in your browser.
+              </Mono>
+            )}
           </Tab.Panel>
         ))}
       </Tab.Panels>