CT/src/View/Components/boardViewToggleButton.tsx

import * as React from "bloatless-react";

import BoardViewModel, {
    BoardPageType,
} from "../../ViewModel/Pages/boardViewModel";

import { RibbonButton } from "./ribbonButton";

export function BoardViewToggleButton(
    label: string,
    icon: string,
    page: BoardPageType,
    boardViewModel: BoardViewModel,
) {
    function select() {
        boardViewModel.selectedPage.value = page;
    }

    const isSelected = React.createProxyState(
        [boardViewModel.selectedPage],
        () => boardViewModel.selectedPage.value == page,
    );

    return RibbonButton(label, icon, isSelected, select);
}