57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { ErrorPanel as ErrorPanelData } from '../../types/terminal';
|
|
|
|
interface ErrorPanelProps {
|
|
error: ErrorPanelData;
|
|
}
|
|
|
|
export const ErrorPanel: React.FC<ErrorPanelProps> = ({ error }) => {
|
|
const metadata = [
|
|
error.provider ? { label: 'Provider', value: error.provider } : null,
|
|
error.query ? { label: 'Query', value: error.query } : null,
|
|
error.symbol ? { label: 'Symbol', value: error.symbol } : null,
|
|
].filter((entry): entry is { label: string; value: string } => entry !== null);
|
|
|
|
return (
|
|
<div className="my-4 overflow-hidden rounded-lg border border-[#5a2026] bg-[#1a0f12]">
|
|
<div className="border-b border-[#5a2026] bg-[#241317] px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-[#7c2d34] bg-[#31161b] text-sm text-[#ff7b8a]">
|
|
!
|
|
</div>
|
|
<div>
|
|
<h3 className="font-mono text-lg font-bold text-[#ffe5e9]">{error.title}</h3>
|
|
<p className="mt-0.5 font-mono text-sm text-[#ffb8c2]">{error.message}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 px-4 py-4">
|
|
{metadata.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{metadata.map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className="rounded border border-[#5a2026] bg-[#241317] px-2.5 py-1 font-mono text-[11px] uppercase tracking-[0.18em] text-[#ffb8c2]"
|
|
>
|
|
{item.label}: <span className="text-[#ffe5e9]">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error.detail && (
|
|
<div className="rounded border border-[#5a2026] bg-[#130b0d] p-3">
|
|
<div className="mb-1 font-mono text-[10px] uppercase tracking-[0.18em] text-[#ff8f9d]">
|
|
Details
|
|
</div>
|
|
<div className="whitespace-pre-wrap font-mono text-sm leading-relaxed text-[#ffd6dc]">
|
|
{error.detail}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|