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

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

type Data = {
  notices: {
    name: string;
    isphoto: BooleanLike;
    ispaper: BooleanLike;
    ref: string;
  }[];
};

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

  const { notices } = data;

  return (
    <Window width={330} height={300}>
      <Window.Content>
        <Section>
          {notices.length ? (
            <LabeledList>
              {notices.map((notice, i) => (
                <LabeledList.Item key={i} label={notice.name}>
                  {(notice.isphoto && (
                    <Button
                      icon="image"
                      content="Look"
                      onClick={() => act('look', { ref: notice.ref })}
                    />
                  )) ||
                    (notice.ispaper && (
                      <Fragment>
                        <Button
                          icon="sticky-note"
                          content="Read"
                          onClick={() => act('read', { ref: notice.ref })}
                        />
                        <Button
                          icon="pen"
                          content="Write"
                          onClick={() => act('write', { ref: notice.ref })}
                        />
                      </Fragment>
                    )) ||
                    'Unknown Entity'}
                  <Button
                    icon="minus-circle"
                    content="Remove"
                    onClick={() => act('remove', { ref: notice.ref })}
                  />
                </LabeledList.Item>
              ))}
            </LabeledList>
          ) : (
            <Box color="average">No notices posted here.</Box>
          )}
        </Section>
      </Window.Content>
    </Window>
  );
};