CHOMPStation2/tgui/packages/tgui_ch/interfaces/VolumePanel.tsx

import { useBackend } from '../backend';
import { Button, LabeledList, Slider, Section } from '../components';
import { Window } from '../layouts';

type Data = {
  volume_channels: { key; val: number }[];
};

export const VolumePanel = (props, context) => {
  const { act, data } = useBackend<Data>(context);

  const { volume_channels } = data;

  return (
    <Window width={350} height={600}>
      <Window.Content>
        <Section title="Volume Levels">
          <LabeledList>
            {Object.keys(volume_channels).map((key) => (
              <LabeledList.Item label={key} key={key}>
                <Slider
                  width="88%"
                  minValue={0}
                  maxValue={200}
                  value={volume_channels[key] * 100}
                  onChange={(e, val) =>
                    act('adjust_volume', { channel: key, vol: val / 100 })
                  }
                />
                <Button
                  ml={1}
                  icon="undo"
                  onClick={() => act('adjust_volume', { channel: key, vol: 1 })}
                />
              </LabeledList.Item>
            ))}
          </LabeledList>
        </Section>
      </Window.Content>
    </Window>
  );
};