webstudio/ui/src/features/create_trigger/presentation/create_trigger_screen.tsx

import * as React from "react";
import { Button, Col, Row, Switch, Typography, Input } from "antd";
import { CodeTriggerForm } from "./components/code_trigger_form";
import { observer } from "mobx-react-lite";
import { triggerStore } from "./trigger_store";
import { FileTriggerForm } from "./components/file_trigger_form";
import { ReactComponent as DeleteIcon } from "../../../assets/icons/delete.svg";
import { Loader } from "../../../core/ui/loader/loader";

const { Title } = Typography;

const Header = observer(() => {
  return (
    <Row style={{ justifyItems: "center", alignItems: "center" }}>
      <div style={{ height: "37px" }}>
        <Switch
          checked={triggerStore.getTriggerType()}
          onChange={() => triggerStore.setTriggerType()}
        />
      </div>
      <Title level={2}>
        Trigger editor: {triggerStore.getTriggerDescription()}
      </Title>
      <div style={{ width: "10px" }}></div>
      <Button onClick={() => triggerStore.saveResult()}>Save result</Button>
    </Row>
  );
});

const Bottom = observer(() => {
  return (
    <Col>
      {triggerStore.triggers.map((el) => {
        return (
          <Row
            style={{
              justifyContent: "center",
            }}
          >
            {el.value}
            <DeleteIcon onClick={() => triggerStore.deleteItem(el.id)} />
          </Row>
        );
      })}
    </Col>
  );
});

export const TriggerScreen: React.FunctionComponent = observer(() => {
  return (
    <>
      <main>
        {!triggerStore.isLoading ? (
          <>
            <Header />,
            <Input
              placeholder="trigger description"
              onChange={() => triggerStore.changeTriggerDescription}
            />
            {triggerStore.getTriggerType() ? (
              <>
                <FileTriggerForm />
              </>
            ) : (
              <>
                <CodeTriggerForm />
              </>
            )}
            <Bottom />
          </>
        ) : (
          <>
 
             <Loader/>
          </>
        )}
      </main>
    </>
  );
});