File size: 3,756 Bytes
f017e43 |
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import React, { useState } from 'react';
import './AddRoleModal.css';
const AddRoleModal = ({ isOpen, onClose, onAddRole }) => {
const [roleName, setRoleName] = useState('');
const [roleDescription, setRoleDescription] = useState('');
const [roleIcon, setRoleIcon] = useState('👤');
const iconOptions = ['👤', '📚', '🔬', '💼', '🎯', '🩺', '📋', '🧠', '💡', '🌟'];
const handleSubmit = (e) => {
e.preventDefault();
if (roleName.trim() && roleDescription.trim()) {
onAddRole({
id: `custom_${Date.now()}`,
name: roleName,
description: roleDescription,
icon: roleIcon,
color: '#8b5cf6', // Purple for custom roles
isCustom: true,
});
setRoleName('');
setRoleDescription('');
setRoleIcon('👤');
onClose();
}
};
if (!isOpen) return null;
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2>Add Custom Role</h2>
<button className="modal-close" onClick={onClose}>×</button>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Role Icon</label>
<div className="icon-picker">
{iconOptions.map((icon) => (
<button
key={icon}
type="button"
className={`icon-option ${roleIcon === icon ? 'selected' : ''}`}
onClick={() => setRoleIcon(icon)}
>
{icon}
</button>
))}
</div>
</div>
<div className="form-group">
<label htmlFor="roleName">Role Name</label>
<input
id="roleName"
type="text"
placeholder="e.g., The Policy Expert"
value={roleName}
onChange={(e) => setRoleName(e.target.value)}
required
/>
</div>
<div className="form-group">
<label htmlFor="roleDescription">Role Focus</label>
<textarea
id="roleDescription"
placeholder="Describe what this role should focus on when reviewing content..."
value={roleDescription}
onChange={(e) => setRoleDescription(e.target.value)}
rows={3}
required
/>
</div>
<div className="modal-actions">
<button type="button" className="btn-secondary" onClick={onClose}>
Cancel
</button>
<button type="submit" className="btn-primary">
Add Role
</button>
</div>
</form>
</div>
</div>
);
};
export default AddRoleModal;
|