Voicemeeter-remote-frontend/src/app/component/StripBusOutput.tsx

"use client";
import { Button, Grid, Slider, Stack, ToggleButton } from "@mui/material";
import React from "react";

export interface StripBusOutputEvent {
  busId: number;
  isVirtual: boolean;
  enabled: boolean;
}

export interface StripProps {
  id: number;
  isVirtual: boolean;
  onChange: (event: StripBusOutputEvent) => any;
  default?: Partial<StripState>;
}

export interface StripState {
  enabled: boolean;
}

export class StripBusOutput extends React.Component<StripProps, StripState> {
  constructor(props: StripProps) {
    super(props);
    this.state = {
      enabled:
        props.default && props.default.enabled !== undefined
          ? props.default.enabled
          : false,
    };
  }
  onClick(event: React.MouseEvent) {
    event.nativeEvent.stopImmediatePropagation();
    this.setState(
      (state) => ({ enabled: !state.enabled }),
      () => {
        this.props.onChange({
          busId: this.props.id,
          enabled: this.state.enabled,
          isVirtual: this.props.isVirtual,
        });
      }
    );
  }

  render() {
    return (
      <>
        <Button
          size="small"
          sx={{ height: "35px" }}
          onClick={(e) => this.onClick(e)}
          variant={this.state.enabled ? "contained" : "text"}
        >
          {this.props.isVirtual ? "B" : "A"}
          {this.props.id + 1}
        </Button>
      </>
    );
  }
}