31 lines
1.7 KiB
TypeScript
31 lines
1.7 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
|
|
interface LoginPromptModalProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const LoginPromptModal: React.FC<LoginPromptModalProps> = ({ onClose }) => (
|
|
<div style={styles.overlay} onClick={onClose}>
|
|
<div style={styles.modal} onClick={(e) => e.stopPropagation()}>
|
|
<h2 style={styles.title}>Sign in to save your project</h2>
|
|
<p style={styles.body}>Create a free account to save and share your projects.</p>
|
|
<div style={styles.actions}>
|
|
<Link to="/login" style={styles.primaryBtn}>Sign in</Link>
|
|
<Link to="/register" style={styles.secondaryBtn}>Create account</Link>
|
|
<button onClick={onClose} style={styles.cancelBtn}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const styles: Record<string, React.CSSProperties> = {
|
|
overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 },
|
|
modal: { background: '#252526', border: '1px solid #3c3c3c', borderRadius: 8, padding: '1.75rem', width: 340, display: 'flex', flexDirection: 'column', gap: 14 },
|
|
title: { color: '#ccc', margin: 0, fontSize: 18, fontWeight: 600 },
|
|
body: { color: '#9d9d9d', margin: 0, fontSize: 14 },
|
|
actions: { display: 'flex', flexDirection: 'column', gap: 8 },
|
|
primaryBtn: { background: '#0e639c', color: '#fff', padding: '9px', borderRadius: 4, textDecoration: 'none', textAlign: 'center', fontSize: 14, fontWeight: 500 },
|
|
secondaryBtn: { background: 'transparent', color: '#ccc', padding: '9px', borderRadius: 4, textDecoration: 'none', textAlign: 'center', fontSize: 14, border: '1px solid #555' },
|
|
cancelBtn: { background: 'transparent', border: 'none', color: '#666', padding: '6px', cursor: 'pointer', fontSize: 13 },
|
|
};
|