e.stopPropagation()}>
{/* ... */}
);
}
```
`.overlay` (styles.css:613) — درست است، دست نزن:
```css
.overlay {
position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
background: rgba(8,13,22,.5); backdrop-filter: blur(4px); ...
}
```
## وظایف
### ۱. ساخت یک کامپوننت کمکی `Portal` (یکبار، برای جلوگیری از تکرار)
فایل جدید: `assets/admin/components/ui/Portal.tsx`
```tsx
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
export default function Portal({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return createPortal(children, document.body);
}
```
> نکته: چون این SPA فقط client-side رندر میشود، `createPortal` مستقیم هم کار میکند؛ ولی داشتن wrapper واحد الگو را در همهجا یکدست و آیندهمحور میکند. اگر ترجیح میدهی بدون کامپوننت جدید پیش بروی، میتوانی در هر فایل مستقیم `createPortal(..., document.body)` بزنی (مثل `ImageCropModal.tsx`). یکی از این دو روش را انتخاب و در همهی موارد یکسان اعمال کن.
### ۲. انتقال `ConfirmDialog.tsx` به portal
```tsx
import Portal from './Portal';
// ...
if (!open) return null;
return (