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 | 1x 5x 5x 1x 4x 5x 5x 1x 4x 5x | import React from "react";
import { COMMON_COMPONENT_TEST_IDS } from "../../constants/testIds";
export interface ValueDisplayProps {
value: string | number;
variant?: "primary" | "success" | "warning" | "danger" | "info";
size?: "sm" | "md" | "lg";
label?: string;
testId?: string;
}
/**
* ValueDisplay shows a value with optional prefix and suffix
*
* @category UI Components
* @param props - Component properties
* @returns Rendered component
*/
const ValueDisplay: React.FC<ValueDisplayProps> = ({
value,
variant = "primary",
size = "md",
label,
testId = COMMON_COMPONENT_TEST_IDS.VALUE_DISPLAY,
}) => {
const getVariantClass = () => {
switch (variant) {
case "success":
return "text-green-600 dark:text-green-400";
case "warning":
return "text-yellow-600 dark:text-yellow-400";
case "danger":
return "text-red-600 dark:text-red-400";
case "info":
return "text-blue-600 dark:text-blue-400";
case "primary":
default:
return "text-blue-600 dark:text-blue-400";
}
};
const getSizeClass = () => {
switch (size) {
case "sm":
return "text-sm";
case "lg":
return "text-lg";
case "md":
default:
return "text-base";
}
};
return (
<div data-testid={testId} className="flex items-center">
<span className={`font-medium ${getVariantClass()} ${getSizeClass()}`}>
{value}
</span>
{label && (
<span className="text-xs text-gray-500 dark:text-gray-400 ml-1">
{label}
</span>
)}
</div>
);
};
export default ValueDisplay;
|