/
Cybran65
/
Project_0
Обзор
Документация
Войти
/
Cybran65
/
Project_0
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/Modal/Modal.tsx
48 строк
2 KB
Cybran65
feat: интерфейс по макету Figma и функции ЛИРА-САПФИР
08 авг 2026, 23:31
08 авг 2026, 23:31
fd3db2b
Код
Авторство
О чём код?
import { useEffect, type ReactNode } from 'react'; import styles from './Modal.module.css'; interface Props { title: string; width?: number; /** Без служебной шапки: окно оформляет содержимое само (как в макете). */ bare?: boolean; onClose: () => void; children: ReactNode; } /** Простое модальное окно в стиле desktop-диалога. */ export default function Modal({ title, width = 480, bare = false, onClose, children }: Props) { useEffect(() => { const handler = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose(); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, [onClose]); return ( <div className={styles.overlay} onMouseDown={onClose}> <div className={styles.dialog} style={{ width }} role="dialog" aria-label={title} onMouseDown={(event) => event.stopPropagation()} > {bare ? ( <button type="button" className={styles.closeFloating} onClick={onClose} title="Закрыть"> ✕ </button> ) : ( <div className={styles.title}> <span>{title}</span> <button type="button" className={styles.close} onClick={onClose} title="Закрыть"> ✕ </button> </div> )} <div className={bare ? styles.contentBare : styles.content}>{children}</div> </div> </div> ); }