53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import type React from "react";
|
|
|
|
import { Button } from "@app/components/form/Button.js";
|
|
import { TabbedContent, TabType } from "@app/components/generic/TabbedContent";
|
|
import { useDevice } from "@app/core/providers/useDevice.js";
|
|
import {
|
|
Cog8ToothIcon,
|
|
CubeTransparentIcon,
|
|
WindowIcon
|
|
} from "@heroicons/react/24/outline";
|
|
import { AppConfig } from "@pages/Config/AppConfig.js";
|
|
import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
|
|
import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
|
|
|
|
export const ConfigPage = (): JSX.Element => {
|
|
const { connection, pendingSettingsChanges } = useDevice();
|
|
|
|
const tabs: TabType[] = [
|
|
{
|
|
name: "Device Config",
|
|
icon: <Cog8ToothIcon className="h-4" />,
|
|
element: DeviceConfig
|
|
},
|
|
{
|
|
name: "Module Config",
|
|
icon: <CubeTransparentIcon className="h-4" />,
|
|
element: ModuleConfig
|
|
},
|
|
{
|
|
name: "App Config",
|
|
icon: <WindowIcon className="h-4" />,
|
|
element: AppConfig
|
|
}
|
|
];
|
|
|
|
return (
|
|
<TabbedContent
|
|
tabs={tabs}
|
|
actions={[
|
|
() => (
|
|
<Button
|
|
disabled={!pendingSettingsChanges}
|
|
onClick={connection?.commitEditSettings}
|
|
variant="primary"
|
|
>
|
|
Commit Changes
|
|
</Button>
|
|
)
|
|
]}
|
|
/>
|
|
);
|
|
};
|