Browse Source

add diabledMessage to TabbedContent

pull/55/head
Sacha Weatherstone 4 years ago
parent
commit
41f9eae019
No known key found for this signature in database GPG Key ID: 7AB2D7E206124B31
  1. 2
      src/components/Button.tsx
  2. 12
      src/components/NewDevice.tsx
  3. 13
      src/components/layout/page/TabbedContent.tsx

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

12
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 (

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

Loading…
Cancel
Save