feat: add StickerWallModal component for full-size sticker wall viewing
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
41
frontend/src/components/StickerWallModal.jsx
Normal file
41
frontend/src/components/StickerWallModal.jsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
function StickerWallModal({ isOpen, onClose, imageUrl }) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
const handleEscape = (e) => {
|
||||||
|
if (e.key === 'Escape') onClose();
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleEscape);
|
||||||
|
return () => document.removeEventListener('keydown', handleEscape);
|
||||||
|
}, [isOpen, onClose]);
|
||||||
|
|
||||||
|
if (!isOpen || !imageUrl) return null;
|
||||||
|
|
||||||
|
const handleOverlayClick = (e) => {
|
||||||
|
if (e.target === e.currentTarget) onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 p-4"
|
||||||
|
onClick={handleOverlayClick}
|
||||||
|
>
|
||||||
|
<div className="relative max-w-[90vw] max-h-[90vh]">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="absolute -top-3 -right-3 w-8 h-8 bg-gray-800 hover:bg-gray-700 text-white rounded-full flex items-center justify-center text-sm font-bold shadow-lg z-10 transition"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
<img
|
||||||
|
src={imageUrl}
|
||||||
|
alt="Sticker Wall"
|
||||||
|
className="max-w-full max-h-[85vh] object-contain rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StickerWallModal;
|
||||||
Reference in New Issue
Block a user