Merge pull request #5 from Rue-pro/ui-modal-component

UI modal component

src/app/popup/styles.scss

@@ -73,20 +73,27 @@
   --color-neutral-900: #18181b;
   --color-text: var(--color-neutral-800);
   --color-text-inverted: #fff;
+}
 
+body {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-weight: 400;
 }
 
 .h1,
 h1 {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 500;
 }
 
 .h2,
 h2 {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 500;
 }
+
+main {
+  width: 320px;
+  height: 480px;
+}

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;
+  }
+}