Spaces:
Sleeping
Sleeping
File size: 2,490 Bytes
5d94d12 | 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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | import React, { useState } from 'react';
import Results from './components/Results';
import { analyzeSkillGap } from './utils/api';
export default function App() {
const [jobPosting, setJobPosting] = useState('');
const [userSkills, setUserSkills] = useState('');
const [loading, setLoading] = useState(false);
const [results, setResults] = useState(null);
const [error, setError] = useState('');
const handleAnalyze = async () => {
setLoading(true);
setError('');
try {
const data = await analyzeSkillGap(jobPosting, userSkills);
setResults(data);
} catch (err) {
setError(err.message);
}
setLoading(false);
};
const handleReset = () => {
setResults(null);
setError('');
};
const canSubmit = jobPosting.trim().length >= 30 && userSkills.trim().length >= 20 && !loading;
if (results) {
return (
<div className="app">
<header className="header">
<h1>Skill Gap Analyzer</h1>
<p>Your personalized bridge to your dream job</p>
</header>
<Results data={results} onReset={handleReset} />
</div>
);
}
return (
<div className="app">
<header className="header">
<h1>Skill Gap Analyzer</h1>
<p>Paste a job posting + your skills. See exactly what you need to learn.</p>
</header>
{error && (
<div style={{ background: 'rgba(248,81,73,0.1)', padding: '1rem', borderRadius: '10px', marginBottom: '1rem', textAlign: 'center', color: 'var(--danger)' }}>
{error}
</div>
)}
<div className="input-section">
<h3>Job Posting</h3>
<textarea
placeholder="Paste the full job description here..."
value={jobPosting}
onChange={(e) => setJobPosting(e.target.value)}
/>
</div>
<div className="input-section">
<h3>Your Skills / Resume</h3>
<textarea
placeholder="Paste your resume, list your skills, or describe your experience..."
value={userSkills}
onChange={(e) => setUserSkills(e.target.value)}
/>
</div>
{loading ? (
<div className="loading">
<div className="spinner" />
<p style={{ color: 'var(--text-dim)' }}>Analyzing your skill gap...</p>
</div>
) : (
<button className="btn-primary" disabled={!canSubmit} onClick={handleAnalyze}>
Analyze My Gap
</button>
)}
</div>
);
}
|