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 | 1x 136x 136x 136x 136x 136x 136x 136x 136x 5x 136x 3x 136x 111x 136x 3x 136x 1x 136x 13x 136x 136x 136x 136x 136x 1x 136x 1x 136x 134x 136x 136x 136x 136x 136x 136x 136x 136x 136x 1x | import React from "react";
import { SecurityLevel } from "../../types/cia";
interface SecurityLevelIndicatorProps {
/**
* The security level to display
*/
level: SecurityLevel;
/**
* Size variant
*/
size?: "sm" | "md" | "lg";
/**
* Optional CSS class name
*/
className?: string;
/**
* Optional test ID for testing
*/
testId?: string;
}
/**
* A simple indicator that displays a security level with appropriate color
*
* ## UX Perspective
*
* Provides consistent visual indicators of security levels using
* color psychology to communicate the level of security provided. 🎨
*/
const SecurityLevelIndicator: React.FC<SecurityLevelIndicatorProps> = ({
level,
size = "md",
className = "",
testId,
}) => {
// Determine color based on level
const getColor = (): string => {
switch (level) {
case "None":
return "bg-red-100 text-red-800 dark:bg-red-900 dark:bg-opacity-20 dark:text-red-300";
case "Low":
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:bg-opacity-20 dark:text-yellow-300";
case "Moderate":
return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:bg-opacity-20 dark:text-blue-300";
case "High":
return "bg-green-100 text-green-800 dark:bg-green-900 dark:bg-opacity-20 dark:text-green-300";
case "Very High":
return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:bg-opacity-20 dark:text-purple-300";
default:
return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
}
};
// Determine size classes
const getSizeClasses = (): string => {
switch (size) {
case "sm":
return "px-1.5 py-0.5 text-xs";
case "lg":
return "px-3 py-1.5 text-sm";
default: // md
return "px-2 py-1 text-xs";
}
};
return (
<span
className={`font-medium rounded-md ${getColor()} ${getSizeClasses()} ${className}`}
data-testid={testId}
>
{level}
</span>
);
};
export default SecurityLevelIndicator;
|