All files / src/components/common ValueDisplay.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
5x
5x
5x
5x
5x
5x
5x
5x
5x
1x
5x
 
5x
 
5x
 
5x
5x
4x
5x
5x
 
5x
5x
5x
 
5x
1x
5x
5x
4x
5x
5x
 
5x
5x
5x
5x
5x
5x
1x
1x
1x
 
5x
 
5x
 
1x
 
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;