dimensionlab-website/packages/ui/src/components/operations/SystemState.tsx

26 lines
581 B
TypeScript

import type { UiSeverity } from "../../types";
import { IconGlyph } from "../foundation/IconGlyph";
export interface SystemStateProps {
title: string;
detail?: string;
icon?: string;
severity?: UiSeverity;
}
export function SystemState({
title,
detail,
icon = "mdi:information-outline",
severity = "neutral",
}: SystemStateProps) {
return (
<section className="system-state" data-severity={severity}>
<IconGlyph name={icon} size="lg" />
<div>
<h2>{title}</h2>
{detail ? <p>{detail}</p> : null}
</div>
</section>
);
}