chore: add modal component

src/shared/ui/Modal/index.tsx

@@ -0,0 +1,41 @@
+import { ComponentChildren } from 'preact'
+import { createPortal } from 'preact/compat'
+import { useEffect, useRef } from 'preact/hooks'
+
+import { browser } from '@shared/browser'
+
+import { Button } from '../Button'
+import { ClearIcon } from '../icons/ClearIcon'
+import styles from './styles.module.scss'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  children: ComponentChildren
+}
+
+export const Modal = ({ open, children, onClose }: Props) => {
+  const dialogRef = useRef<HTMLDialogElement | null>(null)
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      open ? dialogRef.current.showModal() : onClose()
+    }
+  }, [open])
+
+  if (!open) return null
+
+  return createPortal(
+    <dialog ref={dialogRef} className={styles.modal}>
+      <Button
+        variant="secondary"
+        className={styles['modal__close-btn']}
+        onClick={onClose}
+        startIcon={<ClearIcon />}
+        capture={browser.i18n.getMessage('close')}
+      ></Button>
+      {children}
+    </dialog>,
+    document.getElementsByTagName('body')[0],
+  )
+}

src/shared/ui/Modal/styles.module.scss

@@ -0,0 +1,13 @@
+.modal {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: var(--spacing-5);
+  background-color: var(--color-neutral-50);
+  border: none;
+
+  &__close-btn {
+    margin-inline: auto 0;
+  }
+}