Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 92 93 94 95 96 97 98 99 100 101 102 103 | 10x 343x 6x 1x 1x 2x 1x 1x 343x 6x 1x 1x 2x 1x 1x 343x 343x 343x | import React from 'react';
import { SecurityLevel } from '../../types/cia';
interface SecurityLevelBadgeProps {
/**
* The category of the security level (e.g., "Availability")
*/
category: string;
/**
* The security level to display
*/
level: SecurityLevel;
/**
* Custom color class for the badge background
*/
colorClass?: string;
/**
* Custom color class for the badge text
*/
textClass?: string;
/**
* Additional CSS classes
*/
className?: string;
/**
* Test ID for automated testing
*/
testId?: string;
}
/**
* Displays a security level in a badge format
*
* ## Business Perspective
*
* Provides consistent visual indicators of security levels throughout
* the application, enabling users to quickly identify the security
* stance for different components of the CIA triad. 🔒
*/
const SecurityLevelBadge: React.FC<SecurityLevelBadgeProps> = ({
category,
level,
colorClass,
textClass,
className = '',
testId
}) => {
// Default color classes based on security level if not provided
const defaultColorClass = () => {
switch (level) {
case 'None':
return 'bg-red-100 dark:bg-red-900 dark:bg-opacity-20';
case 'Low':
return 'bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-20';
case 'Moderate':
return 'bg-blue-100 dark:bg-blue-900 dark:bg-opacity-20';
case 'High':
return 'bg-green-100 dark:bg-green-900 dark:bg-opacity-20';
case 'Very High':
return 'bg-purple-100 dark:bg-purple-900 dark:bg-opacity-20';
default:
return 'bg-gray-100 dark:bg-gray-800';
}
};
// Default text classes based on security level if not provided
const defaultTextClass = () => {
switch (level) {
case 'None':
return 'text-red-800 dark:text-red-300';
case 'Low':
return 'text-yellow-800 dark:text-yellow-300';
case 'Moderate':
return 'text-blue-800 dark:text-blue-300';
case 'High':
return 'text-green-800 dark:text-green-300';
case 'Very High':
return 'text-purple-800 dark:text-purple-300';
default:
return 'text-gray-800 dark:text-gray-300';
}
};
const badgeColorClass = colorClass || defaultColorClass();
const badgeTextClass = textClass || defaultTextClass();
return (
<span
className={`px-2 py-1 rounded-md text-xs font-medium ${badgeColorClass} ${badgeTextClass} ${className}`}
data-testid={testId}
>
{category && `${category}: `}{level}
</span>
);
};
export default SecurityLevelBadge;
|