Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5

frontend/src/webparts/approvalAdmin/components/ui/Modal.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styles from './Modal.module.scss';
+import { IconButton } from './IconButton';
+import { texts } from '../../texts';
+
+export interface IModalProps {
+  title: string;
+  onClose: () => void;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const Modal: React.FC<IModalProps> = ({ title, onClose, footer, children }) => (
+  // Клик по подложке закрывает окно, клик внутри — нет (проверяем сам currentTarget).
+  <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
+    <div className={styles.box}>
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+        <IconButton icon="close" label={texts.common.close} onClick={onClose} />
+      </div>
+      <div className={styles.body}>{children}</div>
+      {footer && <div className={styles.footer}>{footer}</div>}
+    </div>
+  </div>
+);