File size: 1,633 Bytes
c4e3b10 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import React, { useContext } from 'react';
import { ThemeContext } from '../App';
import { ObjectInfo } from '../types';
interface ObjectInfoPanelProps {
info: ObjectInfo;
onClose: () => void;
}
const ObjectInfoPanel: React.FC<ObjectInfoPanelProps> = ({ info, onClose }) => {
const { theme } = useContext(ThemeContext);
const panelClasses = theme === 'dark'
? 'bg-black/50 border border-cyan-400/50 text-white shadow-[0_0_30px_#00ffff]'
: 'bg-white/50 border border-blue-600/50 text-black shadow-[0_0_30px_#0066cc]';
const titleClasses = theme === 'dark'
? 'bg-gradient-to-r from-cyan-400 to-fuchsia-500'
: 'bg-gradient-to-r from-blue-600 to-orange-500';
return (
<div
className="fixed inset-0 bg-black/60 z-[1000] flex items-center justify-center p-4 animate-fadeIn"
onClick={onClose}
>
<div
className={`relative w-full max-w-md p-8 rounded-2xl backdrop-blur-xl transition-all duration-300 ${panelClasses} animate-slideUp`}
onClick={(e) => e.stopPropagation()}
>
<button
onClick={onClose}
className={`absolute top-4 right-4 text-3xl transition-transform duration-200 hover:rotate-90 ${theme === 'dark' ? 'text-cyan-400' : 'text-blue-600'}`}
aria-label="Close"
>
×
</button>
<h2 className={`text-3xl font-bold mb-4 bg-clip-text text-transparent ${titleClasses}`}>
{info.title}
</h2>
<p className="text-lg leading-relaxed">
{info.description}
</p>
</div>
</div>
);
};
export default ObjectInfoPanel;
|