CT/src/View/Components/chatViewToggleButton.tsx

import * as React from "bloatless-react";

import ChatViewModel, {
    ChatPageType,
} from "../../ViewModel/Chat/chatViewModel";

import { RibbonButton } from "./ribbonButton";

export function ChatViewToggleButton(
    label: string,
    icon: string,
    page: ChatPageType,
    chatViewModel: ChatViewModel,
) {
    function select() {
        chatViewModel.selectedPage.value = page;
    }

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

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