71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { Info } from 'lucide-react';
|
|
|
|
interface MethodologyFooterProps {
|
|
sources?: string;
|
|
methodology?: string;
|
|
notes?: string;
|
|
lastUpdated?: string;
|
|
}
|
|
|
|
/**
|
|
* MethodologyFooter - McKinsey-style footer for charts and visualizations
|
|
*
|
|
* Displays sources, methodology, notes, and last updated information
|
|
* in a professional, consulting-grade format.
|
|
*/
|
|
const MethodologyFooter: React.FC<MethodologyFooterProps> = ({
|
|
sources,
|
|
methodology,
|
|
notes,
|
|
lastUpdated,
|
|
}) => {
|
|
if (!sources && !methodology && !notes && !lastUpdated) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="mt-6 pt-4 border-t border-slate-200">
|
|
<div className="space-y-2 text-xs text-slate-600">
|
|
{sources && (
|
|
<div className="flex items-start gap-2">
|
|
<Info size={12} className="mt-0.5 text-slate-400 flex-shrink-0" />
|
|
<div>
|
|
<span className="font-semibold text-slate-700">Fuentes: </span>
|
|
<span>{sources}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{methodology && (
|
|
<div className="flex items-start gap-2">
|
|
<Info size={12} className="mt-0.5 text-slate-400 flex-shrink-0" />
|
|
<div>
|
|
<span className="font-semibold text-slate-700">Metodología: </span>
|
|
<span>{methodology}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{notes && (
|
|
<div className="flex items-start gap-2">
|
|
<Info size={12} className="mt-0.5 text-slate-400 flex-shrink-0" />
|
|
<div>
|
|
<span className="font-semibold text-slate-700">Nota: </span>
|
|
<span>{notes}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{lastUpdated && (
|
|
<div className="text-slate-500 italic">
|
|
Última actualización: {lastUpdated}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MethodologyFooter;
|