66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { AnimatePresence, motion } from 'motion/react';
|
|
|
|
import { CHROME_ICONS, getNineSliceStyle, UI_CHROME } from '../uiAssets';
|
|
import { PixelIcon } from './PixelIcon';
|
|
|
|
interface DeveloperTeamModalProps {
|
|
isOpen: boolean;
|
|
message: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function DeveloperTeamModal({
|
|
isOpen,
|
|
message,
|
|
onClose,
|
|
}: DeveloperTeamModalProps) {
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[74] flex items-center justify-center bg-black/78 p-3 sm:p-4 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.96, y: 10 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.96, y: 10 }}
|
|
transition={{ duration: 0.18, ease: 'easeOut' }}
|
|
className="pixel-nine-slice pixel-modal-shell flex max-h-[min(92vh,48rem)] w-full max-w-[min(96vw,42rem)] flex-col overflow-hidden shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
|
|
style={getNineSliceStyle(UI_CHROME.modalPanel)}
|
|
onClick={event => event.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
|
|
<div className="min-w-0">
|
|
<div className="mt-1 text-sm font-semibold text-white">{'\u5f00\u53d1\u56e2\u961f'}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-full border border-white/10 bg-black/20 p-2 text-zinc-400 transition-colors hover:text-white"
|
|
aria-label="关闭开发团队弹窗"
|
|
>
|
|
<PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
|
|
<div
|
|
className="pixel-nine-slice pixel-panel flex flex-col items-center gap-5"
|
|
style={getNineSliceStyle(UI_CHROME.panel, { paddingX: 16, paddingY: 16 })}
|
|
>
|
|
<div className="whitespace-pre-line text-center text-sm leading-7 text-zinc-100">
|
|
{message}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|