Spaces:
Sleeping
Sleeping
File size: 2,156 Bytes
ac717a9 | 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 | import React, { useState } from 'react';
export default function Setup({ onStart, loading }) {
const [role, setRole] = useState('');
const [difficulty, setDifficulty] = useState('medium');
const [interviewType, setInterviewType] = useState('mixed');
const [questionCount, setQuestionCount] = useState(5);
const handleStart = () => {
if (role.trim()) {
onStart({ role: role.trim(), difficulty, interviewType, questionCount });
}
};
return (
<div className="setup-card">
<div className="form-group">
<label>Target Role</label>
<input
type="text"
placeholder="e.g., Senior Software Engineer, Product Manager, Data Scientist..."
value={role}
onChange={(e) => setRole(e.target.value)}
/>
</div>
<div className="form-row">
<div className="form-group">
<label>Difficulty</label>
<select value={difficulty} onChange={(e) => setDifficulty(e.target.value)}>
<option value="easy">Easy - Entry level</option>
<option value="medium">Medium - Mid level</option>
<option value="hard">Hard - Senior level</option>
</select>
</div>
<div className="form-group">
<label>Interview Type</label>
<select value={interviewType} onChange={(e) => setInterviewType(e.target.value)}>
<option value="mixed">Mixed</option>
<option value="behavioral">Behavioral</option>
<option value="technical">Technical</option>
</select>
</div>
</div>
<div className="form-group">
<label>Number of Questions ({questionCount})</label>
<input
type="range"
min="3"
max="10"
value={questionCount}
onChange={(e) => setQuestionCount(Number(e.target.value))}
style={{ width: '100%', accentColor: 'var(--accent)' }}
/>
</div>
<button className="btn-primary" onClick={handleStart} disabled={!role.trim() || loading}>
{loading ? 'Preparing interview...' : 'Start Interview'}
</button>
</div>
);
}
|