50 lines
2.1 KiB
JavaScript
50 lines
2.1 KiB
JavaScript
// src/components/PopUpDetail.jsx
|
|
import { useEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
|
|
export default function PopUpDetail({ point, onClose }) {
|
|
const modalRef = useRef();
|
|
|
|
useEffect(() => {
|
|
if (point) {
|
|
gsap.fromTo(modalRef.current,
|
|
{ opacity: 0, scale: 0.8 },
|
|
{ opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.7)" }
|
|
);
|
|
}
|
|
}, [point]);
|
|
|
|
if (!point) return null;
|
|
|
|
return (
|
|
// DaisyUI modal component
|
|
<div
|
|
ref={modalRef}
|
|
className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 z-50 pointer-events-auto"
|
|
onClick={onClose} // คลิกที่พื้นหลังเพื่อปิด
|
|
>
|
|
<div
|
|
className="modal-box bg-base-300 text-base-content p-6 rounded-box shadow-2xl w-96"
|
|
onClick={(e) => e.stopPropagation()} // หยุด event propagation ไม่ให้ปิดเมื่อคลิกใน modal
|
|
>
|
|
<h3 className="font-bold text-lg text-primary mb-2">{point.name} Details</h3>
|
|
<p className="py-2 text-sm">Type: {point.type === 'news' ? 'News Region' : 'Statistics Region'}</p>
|
|
<div className="mt-4">
|
|
<h4 className="font-semibold text-accent mb-1">Recent Updates:</h4>
|
|
{point.news && point.news.length > 0 ? (
|
|
<ul className="list-disc list-inside text-xs">
|
|
{point.news.map((item, index) => (
|
|
<li key={index}>{item}</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="text-xs text-gray-500">No specific updates available.</p>
|
|
)}
|
|
</div>
|
|
<div className="modal-action mt-6">
|
|
<button className="btn btn-sm btn-primary" onClick={onClose}>Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |