common CIAImpactCard.tsx

0% Statements 0/27

100% Branches 1/1

100% Functions 1/1

0% Lines 0/27

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { ReactNode } from "react";
import { SecurityLevel } from "../../types/cia";
import StatusBadge from "./StatusBadge";
 
interface CIAImpactCardProps {
  title: string;
  level: SecurityLevel;
  description: string;
  icon: string;
  badgeVariant: "info" | "success" | "purple" | "warning" | "error" | "neutral";
  cardClass?: string;
  testId?: string;
  children?: ReactNode;
}
 
/**
 * Reusable card component for displaying CIA impact information
 *
 * Provides consistent styling and organization for CIA impact details across widgets
 */
const CIAImpactCard: React.FC<CIAImpactCardProps> = ({
  title,
  level,
  description,
  icon,
  badgeVariant,
  cardClass = "",
  testId,
  children,
}) => {
  return (
    <div
      className={`bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border shadow-sm ${cardClass}`}
      data-testid={testId}
    >
      <div className="flex justify-between items-center mb-2">
        <h4 className="font-medium flex items-center">
          <span className="mr-2">{icon}</span>
          {title}
        </h4>
        <StatusBadge status={badgeVariant}>{level}</StatusBadge>
      </div>
 
      <p className="text-sm text-gray-700 dark:text-gray-300">{description}</p>
 
      {children}
    </div>
  );
};
 
export default CIAImpactCard;