49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { InformationCircleIcon, ExclamationTriangleIcon } from './Icons';
|
||
|
|
|
||
|
|
interface InfoPanelProps {
|
||
|
|
title?: string;
|
||
|
|
type: 'note' | 'info' | 'warning';
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const InfoPanel: React.FC<InfoPanelProps> = ({ title, type, children }) => {
|
||
|
|
let panelClasses = 'p-4 rounded-md my-6 border-l-4 shadow-md';
|
||
|
|
let titleClasses = 'font-semibold mb-2';
|
||
|
|
let IconComponent: React.FC<React.SVGProps<SVGSVGElement>> | null = null;
|
||
|
|
|
||
|
|
switch (type) {
|
||
|
|
case 'info':
|
||
|
|
panelClasses += ' bg-blue-900/30 border-blue-500 text-blue-200';
|
||
|
|
titleClasses += ' text-blue-300';
|
||
|
|
IconComponent = InformationCircleIcon;
|
||
|
|
break;
|
||
|
|
case 'warning':
|
||
|
|
panelClasses += ' bg-yellow-900/30 border-yellow-500 text-yellow-200';
|
||
|
|
titleClasses += ' text-yellow-300';
|
||
|
|
IconComponent = ExclamationTriangleIcon;
|
||
|
|
break;
|
||
|
|
case 'note':
|
||
|
|
default:
|
||
|
|
panelClasses += ' bg-gray-800 border-purple-500 text-gray-300';
|
||
|
|
titleClasses += ' text-purple-300';
|
||
|
|
IconComponent = InformationCircleIcon; // Default to info icon for notes
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={panelClasses}>
|
||
|
|
{title && (
|
||
|
|
<div className="flex items-center">
|
||
|
|
{IconComponent && <IconComponent className="h-6 w-6 mr-2 flex-shrink-0" />}
|
||
|
|
<h4 className={titleClasses}>{title}</h4>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className={`prose prose-sm prose-invert max-w-none ${title ? 'mt-1' : ''} ${IconComponent && !title ? 'ml-8' : ''}`}>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|