📌 Пример результата работы промта
🤖
Задача: Компонент модального окна на React+TS
import { useEffect, useRef, type ReactNode } from 'react';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
children: ReactNode;
title?: string;
}
export const Modal = ({ isOpen, onClose, children, title }: ModalProps) => {
const overlayRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
if (isOpen) {
document.addEventListener('keydown', handleEsc);
document.body.style.overflow = 'hidden';
}
return () => {
document.removeEventListener('keydown', handleEsc);
document.body.style.overflow = '';
};
}, [isOpen, onClose]);
if (!isOpen) return null;
return (
<div
ref={overlayRef}
className="modal-overlay"
onClick={(e) => e.target === overlayRef.current && onClose()}
role="dialog"
aria-modal="true"
aria-label={title}
>
<div className="modal-content">{children}</div>
</div>
);
};Ключевые решения:
- Escape закрывает окно (a11y)
- body overflow hidden при открытии (no scroll behind)
- Клик по оверлею = закрытие
- role="dialog" + aria-modal для скринридеров
📄 frontend-dev.txt
✅ Скопировано в буфер
# Системный промт
[Загрузка...]
# Нажмите Demo или оформите подписку
# чтобы увидеть полный промт
🔒
Промт скрыт
Чтобы скопировать этот и еще 1000+ рабочих промтов, оформи подписку.
🔥 Оформить подписку за 990 ₽
Уже есть подписка? Войти