hamid zarghami
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
'use client'
|
|
import { FC, ReactNode, useEffect } from 'react'
|
|
import { CloseCircle } from 'iconsax-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type Props = {
|
|
open: boolean
|
|
close: () => void
|
|
children: ReactNode
|
|
title?: string
|
|
isHeader?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const Modal: FC<Props> = ({ open, close, children, title, isHeader = false, className }) => {
|
|
useEffect(() => {
|
|
if (open) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = 'unset'
|
|
}
|
|
|
|
return () => {
|
|
document.body.style.overflow = 'unset'
|
|
}
|
|
}, [open])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={close}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className={cn(
|
|
"relative bg-white rounded-2xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto",
|
|
className
|
|
)}>
|
|
{/* Header */}
|
|
{isHeader && (
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
<h2 className="text-lg font-semibold text-gray-900">{title}</h2>
|
|
<button
|
|
onClick={close}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<CloseCircle size={20} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Modal
|