Spaces:
Running
Running
File size: 1,768 Bytes
ba95018 | 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 50 51 52 53 54 55 56 57 58 59 60 | import { useState } from 'react';
import { X, Plus } from 'lucide-react';
export default function AddSectionModal({ isOpen, onClose, onAdd }) {
const [title, setTitle] = useState('');
if (!isOpen) return null;
const handleAdd = () => {
if (title.trim()) {
onAdd(title.trim());
setTitle('');
onClose();
}
};
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal" onClick={e => e.stopPropagation()}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-4)' }}>
<h3 className="modal__title" style={{ margin: 0 }}>Add Custom Section</h3>
<button className="preview-panel__close" onClick={onClose}>
<X size={16} />
</button>
</div>
<div className="text-input">
<label className="text-input__label" htmlFor="custom-section-title">
Section Title
</label>
<input
id="custom-section-title"
type="text"
className="text-input__field"
placeholder="e.g., Cognitive Retraining"
value={title}
onChange={e => setTitle(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleAdd()}
autoFocus
/>
</div>
<div className="modal__actions">
<button className="navbar__btn" onClick={onClose}>
Cancel
</button>
<button
className="navbar__btn navbar__btn--primary"
onClick={handleAdd}
disabled={!title.trim()}
>
<Plus size={16} />
Add Section
</button>
</div>
</div>
</div>
);
}
|