Spaces:
Running
Running
File size: 1,768 Bytes
2e9c97f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import LoadingSpinner from './LoadingSpinner';
interface JobMatchDashboardProps {
score: number;
suggestions: string[];
isLoading: boolean;
hasContent: boolean;
}
export default function JobMatchDashboard({ score, suggestions, isLoading, hasContent }: JobMatchDashboardProps) {
const gaugeRotation = (score / 100) * 180; // 0 score = 0deg, 100 score = 180deg
if (!hasContent) {
return (
<div className="dashboard">
<div className="copilot-placeholder">
<i className="ph-lightbulb" style={{fontSize: '2rem', marginBottom: '0.5rem'}}></i>
Your Job Match Score and AI Insights will appear here once a resume is generated.
</div>
</div>
)
}
return (
<div className="dashboard">
<h2>Live Analysis</h2>
<div className="score-gauge">
<div className="score-gauge-bg"></div>
<div
className="score-gauge-fill"
style={{ '--gauge-rotation': `${gaugeRotation}deg` } as React.CSSProperties}
></div>
<div className="score-text">{score}<span>/100</span></div>
</div>
<div className="suggestions-list">
<h3>AI Suggestions {isLoading && <small>(Updating...)</small>}</h3>
{suggestions.length > 0 ? (
<ul>
{suggestions.map((suggestion, index) => (
<li key={index} className="suggestion-item">
<i className="ph-check-circle"></i>
<span>{suggestion}</span>
</li>
))}
</ul>
) : (
<p>No suggestions at the moment. Looks good!</p>
)}
</div>
</div>
);
}
|