59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
/**
|
|
* AccessLevelSelect
|
|
*
|
|
* Dropdown component for selecting RBAC access levels (n/m/g/a).
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { ACCESS_LEVEL_OPTIONS, type AccessLevel, getAccessLevelColor } from '../../hooks/useAccessRules';
|
|
import styles from './AccessRules.module.css';
|
|
|
|
interface AccessLevelSelectProps {
|
|
value: AccessLevel | null;
|
|
onChange: (value: AccessLevel) => void;
|
|
disabled?: boolean;
|
|
label?: string;
|
|
showLabel?: boolean;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const AccessLevelSelect: React.FC<AccessLevelSelectProps> = ({
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
label,
|
|
showLabel = false,
|
|
compact = false,
|
|
}) => {
|
|
const currentColor = getAccessLevelColor(value);
|
|
|
|
return (
|
|
<div className={`${styles.accessLevelSelect} ${compact ? styles.compact : ''}`}>
|
|
{showLabel && label && (
|
|
<label className={styles.accessLevelLabel}>{label}</label>
|
|
)}
|
|
<select
|
|
value={value || 'n'}
|
|
onChange={(e) => onChange(e.target.value as AccessLevel)}
|
|
disabled={disabled}
|
|
className={styles.accessLevelDropdown}
|
|
style={{
|
|
borderColor: currentColor,
|
|
color: currentColor,
|
|
}}
|
|
>
|
|
{ACCESS_LEVEL_OPTIONS.map(option => (
|
|
<option
|
|
key={option.value}
|
|
value={option.value}
|
|
style={{ color: option.color }}
|
|
>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AccessLevelSelect;
|