diff --git a/.vscode/settings.json b/.vscode/settings.json index 2b006d2e..8b8a815f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,4 +3,4 @@ "editor.quickSuggestions": { "strings": true } -} +} \ No newline at end of file diff --git a/src/components/NewDevice.tsx b/src/components/NewDevice.tsx index 192f8369..d5514cc9 100644 --- a/src/components/NewDevice.tsx +++ b/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: , element: HTTP, - disabled: false + disabled: false, + disabledMessage: "Unsuported connection method" }, { name: "Serial", diff --git a/src/components/layout/page/TabbedContent.tsx b/src/components/layout/page/TabbedContent.tsx index 87a744e4..41ad55a7 100644 --- a/src/components/layout/page/TabbedContent.tsx +++ b/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 = ({ {({ selected }) => (
{entry.icon && ( @@ -55,7 +55,28 @@ export const TabbedContent = ({ {!entry.disabled ? ( ) : ( - {entry.disabledMessage} +
+ + {entry.disabledMessage || "This tab is disabled"}. + {' '} + {entry.disabledLink && ( + <> + Click + {' '} + + here + + {' '} + for more information. + + )} + +
)} ))}