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 | 1x 1x 1x 1x 27x 27x 27x 27x 1x | import React from "react";
import { clsx } from "clsx";
import { SEVERITY_COLORS } from "../../constants";
import type { Severity } from "../../types";
import styles from "./StatusBadge.module.scss";
export interface StatusBadgeProps {
/** Current severity level */
severity: Severity;
/** Show pulse animation for warning/critical */
pulse?: boolean;
/** Size variant */
size?: "sm" | "md" | "lg";
/** Custom class name */
className?: string;
}
/**
* Severity labels
*/
const severityLabels: Record<Severity, string> = {
normal: "Normal",
warning: "Warning",
critical: "Critical",
};
/**
* Severity style mapping
*/
const severityStyles: Record<Severity, string> = {
normal: styles.severityNormal,
warning: styles.severityWarning,
critical: styles.severityCritical,
};
/**
* Size style mapping
*/
const sizeStyles: Record<"sm" | "md" | "lg", string> = {
sm: styles.sizeSm,
md: styles.sizeMd,
lg: styles.sizeLg,
};
/**
* Dot size style mapping
*/
const dotSizeStyles: Record<"sm" | "md" | "lg", string> = {
sm: styles.dotSizeSm,
md: styles.dotSizeMd,
lg: styles.dotSizeLg,
};
/**
* Status badge component showing current memory severity
*/
export function StatusBadge({
severity,
pulse = true,
size = "md",
className,
}: StatusBadgeProps) {
const colors = SEVERITY_COLORS[severity];
const label = severityLabels[severity];
const shouldPulse = pulse && severity !== "normal";
return (
<div
className={clsx(
styles.badge,
sizeStyles[size],
severityStyles[severity],
className
)}
>
{/* Status dot */}
<span className={styles.dotWrapper}>
<span
className={clsx(styles.dot, dotSizeStyles[size])}
style={{ backgroundColor: colors.accent }}
/>
{shouldPulse && (
<span
className={clsx(styles.dotPing, dotSizeStyles[size])}
style={{ backgroundColor: colors.accent }}
/>
)}
</span>
{/* Label */}
<span>{label}</span>
</div>
);
}
StatusBadge.displayName = "StatusBadge";
|