74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { Alert, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
|
|
import { IconAlertTriangle, IconCheck } from "@tabler/icons-react";
|
|
|
|
import type { EditorDiagnostic } from "./analyzer";
|
|
|
|
interface PreviewDiagnosticsMessages {
|
|
templateSize: string;
|
|
characters: (count: number) => string;
|
|
namedRequests: string;
|
|
methods: string;
|
|
networkScope: string;
|
|
ready: string;
|
|
diagnostic: (diagnostic: EditorDiagnostic) => string;
|
|
}
|
|
|
|
interface PreviewDiagnosticsPanelProps {
|
|
templateLength: number;
|
|
namedRequestCount: number;
|
|
methods: string;
|
|
networkScope: string;
|
|
diagnostics: EditorDiagnostic[];
|
|
messages: PreviewDiagnosticsMessages;
|
|
}
|
|
|
|
export function PreviewDiagnosticsPanel({
|
|
templateLength,
|
|
namedRequestCount,
|
|
methods,
|
|
networkScope,
|
|
diagnostics,
|
|
messages,
|
|
}: PreviewDiagnosticsPanelProps) {
|
|
return (
|
|
<Stack gap="xs">
|
|
<SimpleGrid cols={2} spacing="xs">
|
|
<DiagnosticFact label={messages.templateSize} value={messages.characters(templateLength)} />
|
|
<DiagnosticFact label={messages.namedRequests} value={String(namedRequestCount)} />
|
|
<DiagnosticFact label={messages.methods} value={methods} />
|
|
<DiagnosticFact label={messages.networkScope} value={networkScope} />
|
|
</SimpleGrid>
|
|
{diagnostics.length === 0 ? (
|
|
<Alert color="green" variant="light" p="xs" icon={<IconCheck size={15} />}>
|
|
<Text size="xs">{messages.ready}</Text>
|
|
</Alert>
|
|
) : (
|
|
diagnostics.map((diagnostic, index) => (
|
|
<Alert
|
|
key={`${diagnostic.code}-${index}`}
|
|
color={diagnostic.severity === "error" ? "red" : "yellow"}
|
|
variant="light"
|
|
p="xs"
|
|
icon={<IconAlertTriangle size={15} />}
|
|
>
|
|
<Text size="xs">{messages.diagnostic(diagnostic)}</Text>
|
|
</Alert>
|
|
))
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function DiagnosticFact({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<Paper withBorder p="xs">
|
|
<Text size="xs" c="dimmed">
|
|
{label}
|
|
</Text>
|
|
<Text size="xs" fw={600} lineClamp={2}>
|
|
{value || "—"}
|
|
</Text>
|
|
</Paper>
|
|
);
|
|
}
|