dimensionlab-website/src/lib/ui/components/SystemState.tsx

26 lines
566 B
TypeScript

import type { UiSeverity } from "../types";
import { IconGlyph } from "./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>
);
}