meshtastic/src/components/hardware/Tabs/InfoTab.tsx
2023-05-12 11:45:34 +10:00

49 lines
1.4 KiB
TypeScript

import React from "react";
import { Tab } from "@headlessui/react";
import type { IDevice } from "../../../data/device";
export interface InfoTabProps {
device: IDevice;
}
export const InfoTab = ({ device }: InfoTabProps): JSX.Element => {
return (
<Tab.Panel>
<div className="px-4 py-5 sm:p-0">
<dl className="sm:divide-y sm:divide-gray-200">
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-sm font-medium text-secondaryInv">
BLE/WiFi Version
</dt>
<dd className="mt-1 flex gap-1 text-sm text-tertiaryInv sm:col-span-2 sm:mt-0">
<span className="rounded-md bg-secondary px-0.5">
{device.specifications.BLEVersion}
</span>
/
<span className="rounded-md bg-secondary px-0.5">
{device.specifications.WiFiVersion}
</span>
</dd>
</div>
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt className="text-sm font-medium text-secondaryInv">
BLE/WiFi Antenna
</dt>
<dd className="mt-1 flex gap-1 text-sm text-tertiaryInv sm:col-span-2 sm:mt-0">
<span className="rounded-md bg-secondary px-0.5">
{device.specifications.BLEAntenna}
</span>
/
<span className="rounded-md bg-secondary px-0.5">
{device.specifications.WiFiAntenna}
</span>
</dd>
</div>
</dl>
</div>
</Tab.Panel>
);
};