Allen
71 lines
2.6 KiB
React
71 lines
2.6 KiB
React
import { useNavigate } from 'react-router-dom';
|
|
import useFocusTrap from '../hooks/useFocusTrap';
|
|
import './UpgradePrompt.css';
|
|
|
|
export default function UpgradePrompt({ onClose, feature = 'this feature' }) {
|
|
const navigate = useNavigate();
|
|
|
|
// Focus trap with escape key handling and auto-focus
|
|
const modalRef = useFocusTrap(true, {
|
|
onEscape: onClose,
|
|
autoFocus: true,
|
|
restoreFocus: true
|
|
});
|
|
|
|
const handleCreateAccount = () => {
|
|
onClose();
|
|
navigate('/register');
|
|
};
|
|
|
|
const benefits = [
|
|
{ icon: '💾', title: 'Save Your Progress', description: 'Keep track of your high scores and achievements' },
|
|
{ icon: '🎮', title: 'Create Games', description: 'Design your own games with our easy wizard' },
|
|
{ icon: '🏆', title: 'Earn Achievements', description: 'Unlock cool badges as you play and create' },
|
|
{ icon: '👥', title: 'Follow Creators', description: 'Get notified when your favorite creators make new games' }
|
|
];
|
|
|
|
return (
|
|
<div className="upgrade-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="upgrade-title">
|
|
<div className="upgrade-modal" ref={modalRef} onClick={e => e.stopPropagation()}>
|
|
<button className="upgrade-close" onClick={onClose} aria-label="Close upgrade prompt">×</button>
|
|
|
|
<div className="upgrade-header">
|
|
<span className="upgrade-icon" aria-hidden="true">🌟</span>
|
|
<h2 id="upgrade-title">Create Your Free Account!</h2>
|
|
<p className="upgrade-subtitle">
|
|
You need an account to {feature}. It's free and only takes a minute!
|
|
</p>
|
|
</div>
|
|
|
|
<div className="upgrade-benefits">
|
|
<h3>With a free account, you can:</h3>
|
|
<ul className="benefits-list">
|
|
{benefits.map((benefit, index) => (
|
|
<li key={index} className="benefit-item">
|
|
<span className="benefit-icon">{benefit.icon}</span>
|
|
<div className="benefit-text">
|
|
<strong>{benefit.title}</strong>
|
|
<span>{benefit.description}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="upgrade-actions">
|
|
<button className="btn btn-primary upgrade-btn" onClick={handleCreateAccount}>
|
|
Create Account
|
|
</button>
|
|
<button className="btn btn-secondary maybe-later-btn" onClick={onClose}>
|
|
Maybe Later
|
|
</button>
|
|
</div>
|
|
|
|
<p className="upgrade-note">
|
|
You can still play all games as a guest - no worries!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|