46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
type ChartContainerProps = {
|
|
children: React.ReactNode;
|
|
height?: number;
|
|
loading?: boolean;
|
|
error?: string | null;
|
|
className?: string;
|
|
};
|
|
|
|
export function ChartContainer({
|
|
children,
|
|
height = 400,
|
|
loading = false,
|
|
error = null,
|
|
className
|
|
}: ChartContainerProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'relative w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]',
|
|
className
|
|
)}
|
|
style={{ height: `${height}px` }}
|
|
>
|
|
{loading && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-sm text-[color:var(--terminal-muted)]">Loading chart...</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-sm text-[color:var(--danger)]">{error}</div>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && (
|
|
<div className="h-full w-full p-4">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|