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

import { BooleanLike } from 'common/react';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, Section } from '../components';
import { Window } from '../layouts';

type Data = {
  id: string;
  turrets: { id: string; active: BooleanLike; ref: string; effective_range; reaction_wheel_delay; recharge_time }[];
};

export const PointDefenseControl = (props, context) => {
  const { act, data } = useBackend<Data>(context);
  const { id, turrets } = data;
  return (
    <Window width={400} height={600}>
      <Window.Content scrollable>
        <Section title={'Fire Assist Mainframe: ' + (id || '[no tag]')}>
          {(turrets.length &&
            turrets.map((pd) => (
              <Section
                title={pd.id}
                key={pd.id}
                buttons={
                  <Button
                    selected={pd.active}
                    icon="power-off"
                    onClick={() => act('toggle_active', { target: pd.ref })}>
                    {pd.active ? 'Online' : 'Offline'}
                  </Button>
                }>
                <LabeledList>
                  <LabeledList.Item label="Effective range">{pd.effective_range}</LabeledList.Item>
                  <LabeledList.Item label="Reaction wheel delay">{pd.reaction_wheel_delay}</LabeledList.Item>
                  <LabeledList.Item label="Recharge time">{pd.recharge_time}</LabeledList.Item>
                </LabeledList>
              </Section>
            ))) || <Box color="bad">Error: No weapon systems detected. Please check network connection.</Box>}
        </Section>
      </Window.Content>
    </Window>
  );
};