clash-verge-rev/src/components/setting/mods/stack-mode-switch.tsx

import { Button, ButtonGroup } from "@mui/material";

interface Props {
  value?: string;
  onChange?: (value: string) => void;
}

export const StackModeSwitch = (props: Props) => {
  const { value, onChange } = props;

  return (
    <ButtonGroup size="small" sx={{ my: "4px" }}>
      <Button
        variant={value?.toLowerCase() === "system" ? "contained" : "outlined"}
        onClick={() => onChange?.("system")}
        sx={{ textTransform: "capitalize" }}
      >
        System
      </Button>
      <Button
        variant={value?.toLowerCase() === "gvisor" ? "contained" : "outlined"}
        onClick={() => onChange?.("gvisor")}
        sx={{ textTransform: "capitalize" }}
      >
        gVisor
      </Button>
      <Button
        variant={value?.toLowerCase() === "mixed" ? "contained" : "outlined"}
        onClick={() => onChange?.("mixed")}
        sx={{ textTransform: "capitalize" }}
      >
        Mixed
      </Button>
    </ButtonGroup>
  );
};