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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 5x 5x 73x 73x 73x 9x 10x 19x 4x 31x 73x 73x 31x 1x 41x 73x | import * as React from "react";
import { StatusType } from "../../types/common/StatusTypes";
export interface StatusBadgeProps {
/**
* The status type (determines color when variant is not provided)
*/
status: StatusType;
/**
* The content to display inside the badge
*/
children: React.ReactNode;
/**
* Additional CSS classes
*/
className?: string;
/**
* Test ID for automated testing
*/
testId?: string;
/**
* Optional size variant
*/
size?: "sm" | "md" | "lg";
/**
* Badge color scheme override. When provided and matches a known type,
* overrides the color derived from `status`. This allows callers to
* decouple the semantic status from the visual presentation.
*
* @example
* ```tsx
* // Color driven by status (default behavior)
* <StatusBadge status="success">OK</StatusBadge>
*
* // Color overridden by variant
* <StatusBadge status="info" variant="warning">Needs attention</StatusBadge>
* ```
*/
variant?: "error" | "warning" | "info" | "success" | "neutral" | string;
}
/** Known variant values that map to specific color schemes */
const KNOWN_VARIANTS = new Set<string>([
"error",
"warning",
"info",
"success",
"neutral",
"purple",
]);
/**
* Displays a status badge with appropriate colors
*
* ## UX Perspective
*
* Provides consistent visual indicators of status throughout the
* application, using color psychology to communicate severity and
* importance at a glance. 🎨
*/
const StatusBadge: React.FC<StatusBadgeProps> = ({
status,
children,
className = "",
testId,
size = "md",
variant,
}) => {
const colorKey: string =
variant && KNOWN_VARIANTS.has(variant) ? variant : status;
const getStatusClasses = (): string => {
switch (colorKey) {
case "success":
return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300";
case "info":
return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
case "warning":
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300";
case "error":
return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300";
case "neutral":
return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
case "purple":
return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
default:
return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
}
};
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 ${getStatusClasses()} ${getSizeClasses()} ${className}`}
data-testid={testId}
>
{children}
</span>
);
};
export default StatusBadge;
export type { StatusType };
|