mokhtar
037f209179
Gates / frontend (push) Successful in 1m33s
Gates / test (push) Successful in 1m48s
Gates / test-aarch64 (push) Successful in 7m10s
Gates / package (push) Successful in 5m31s
Gates / container (push) Successful in 15s
CI / gates (push) Successful in 14m51s
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
/**
|
|
* The severity chip both diagnostics views carry. The word is the affordance —
|
|
* colour alone would leave the severity unreadable to a screen reader and to
|
|
* anyone who does not separate the amber from the red.
|
|
*/
|
|
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import type { DiagnosticSeverity } from "@/lib/types";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
const styles = stylex.create({
|
|
badge: {
|
|
display: "inline-block",
|
|
borderRadius: "0.25rem",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
paddingInline: "0.375rem",
|
|
paddingBlock: "0.125rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
fontWeight: 500,
|
|
whiteSpace: "nowrap",
|
|
},
|
|
warning: {
|
|
borderColor: colors.warnBorder,
|
|
backgroundColor: colors.warnSurface,
|
|
color: colors.warnText,
|
|
},
|
|
error: {
|
|
borderColor: colors.dangerBorder,
|
|
backgroundColor: colors.dangerSurface,
|
|
color: colors.dangerText,
|
|
},
|
|
});
|
|
|
|
export default function SeverityBadge({ severity }: { severity: DiagnosticSeverity }) {
|
|
return (
|
|
<span {...stylex.props(styles.badge, severity === "error" ? styles.error : styles.warning)}>
|
|
{severity === "error" ? "Error" : "Warning"}
|
|
</span>
|
|
);
|
|
}
|