40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { X } from "lucide-react"
|
|
|
|
interface InfoModalProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
content: string
|
|
title: string
|
|
}
|
|
|
|
export default function InfoModal({ isOpen, onClose, content, title }: InfoModalProps) {
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={onClose}>
|
|
<div
|
|
className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
|
|
<h3 className="text-xl font-medium text-gray-800">{title}</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-500 hover:text-gray-700 transition-colors"
|
|
aria-label="Close modal"
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="prose prose-gray max-w-none">
|
|
<p className="text-gray-700 leading-relaxed whitespace-pre-line">{content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|