33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { X } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Heading } from './Heading';
|
|
import { IconButton } from './IconButton';
|
|
|
|
export interface DebugPanelProps {
|
|
title: string;
|
|
children: ReactNode;
|
|
onClose: () => void;
|
|
icon?: ReactNode;
|
|
}
|
|
|
|
export const DebugPanel = ({ title, children, onClose, icon }: DebugPanelProps) => {
|
|
return (
|
|
<Box position="fixed" style={{ bottom: '1rem', left: '1rem', width: '20rem', zIndex: 100 }}>
|
|
<Card variant="dark" padding={0}>
|
|
<Box display="flex" alignItems="center" justifyContent="between" padding={3} bg="var(--ui-color-bg-surface-muted)" style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{icon}
|
|
<Heading level={6}>{title}</Heading>
|
|
</Box>
|
|
<IconButton icon={X} size="sm" variant="ghost" onClick={onClose} />
|
|
</Box>
|
|
<Box padding={3}>
|
|
{children}
|
|
</Box>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
};
|