64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CvSummaryPanelProps {
|
|
summary: string | null;
|
|
analysisData: any | null;
|
|
}
|
|
|
|
const CvSummaryPanel: React.FC<CvSummaryPanelProps> = ({ summary, analysisData }) => {
|
|
if (!analysisData) {
|
|
return <div className="p-6 text-gray-500">No summary available yet. Upload your CV to see the summary.</div>;
|
|
}
|
|
|
|
const sectionColors = {
|
|
"Summary": "bg-blue-500",
|
|
"Work Experience": "bg-green-500",
|
|
"Education": "bg-yellow-500",
|
|
"Skills": "bg-red-500",
|
|
"Certifications": "bg-purple-500",
|
|
"Projects": "bg-teal-500",
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 bg-gray-50 rounded-md shadow-md">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">CV Section Scores</h2>
|
|
<div className="space-y-4">
|
|
{Object.entries(analysisData.sections).map(([sectionName, sectionData]: [string, any]) => (
|
|
<div key={sectionName} className="space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-32 font-bold text-gray-900">{sectionName}</div>
|
|
<div className="relative w-full bg-gray-200 rounded-full h-6">
|
|
<div
|
|
className={`absolute left-0 top-0 h-6 rounded-full ${(sectionColors as any)[sectionName] ?? 'bg-gray-700'}`}
|
|
style={{ width: `${(sectionData.score / 10) * 100}%` }}
|
|
>
|
|
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-sm font-bold text-white">{sectionData.score}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{sectionData.suggestions && sectionData.suggestions.length > 0 && (
|
|
<div key={`${sectionName}-suggestions`} className="space-y-1">
|
|
<ul className="list-disc pl-8 text-gray-700">
|
|
{sectionData.suggestions.map((suggestion: string, index: number) => (
|
|
<li key={index}>{suggestion}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{summary && (
|
|
<>
|
|
<h2 className="text-xl font-bold text-gray-900 mt-6 mb-4">CV Summary</h2>
|
|
<div className="text-gray-700 whitespace-pre-line">
|
|
{summary}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CvSummaryPanel;
|