Spaces:
Sleeping
Sleeping
| /** | |
| * QuestionTimer - Countdown Timer Component for Strict/High-Pressure Interviews | |
| * | |
| * Shows remaining time for current question with visual urgency indicators. | |
| */ | |
| import React, { useMemo } from 'react'; | |
| import { Clock, AlertTriangle } from 'lucide-react'; | |
| import './QuestionTimer.css'; | |
| export default function QuestionTimer({ | |
| timeRemaining, | |
| totalTime, | |
| isRunning, | |
| onTimeUp, | |
| showWarnings = true | |
| }) { | |
| // Calculate percentage for progress bar | |
| const percentage = totalTime > 0 ? (timeRemaining / totalTime) * 100 : 100; | |
| // Determine urgency level | |
| const urgency = useMemo(() => { | |
| if (timeRemaining <= 10) return 'critical'; // Last 10 seconds | |
| if (timeRemaining <= 30) return 'warning'; // Last 30 seconds | |
| if (percentage <= 25) return 'low'; // Last quarter | |
| return 'normal'; | |
| }, [timeRemaining, percentage]); | |
| // Format time as MM:SS | |
| const formattedTime = useMemo(() => { | |
| const minutes = Math.floor(timeRemaining / 60); | |
| const seconds = timeRemaining % 60; | |
| return `${minutes}:${seconds.toString().padStart(2, '0')}`; | |
| }, [timeRemaining]); | |
| // Don't render if no time limit | |
| if (totalTime <= 0) return null; | |
| return ( | |
| <div className={`question-timer ${urgency} ${isRunning ? 'running' : 'paused'}`}> | |
| <div className="timer-header"> | |
| {urgency === 'critical' ? ( | |
| <AlertTriangle size={16} className="timer-icon pulse" /> | |
| ) : ( | |
| <Clock size={16} className="timer-icon" /> | |
| )} | |
| <span className="timer-label">Time Remaining</span> | |
| </div> | |
| <div className="timer-display"> | |
| <span className={`timer-value ${urgency}`}>{formattedTime}</span> | |
| </div> | |
| <div className="timer-progress-bar"> | |
| <div | |
| className={`timer-progress-fill ${urgency}`} | |
| style={{ width: `${percentage}%` }} | |
| /> | |
| </div> | |
| {showWarnings && urgency === 'warning' && ( | |
| <div className="timer-warning"> | |
| ⚠️ 30 seconds remaining! | |
| </div> | |
| )} | |
| {showWarnings && urgency === 'critical' && ( | |
| <div className="timer-warning critical"> | |
| 🚨 Wrap up your answer! | |
| </div> | |
| )} | |
| {timeRemaining === 0 && ( | |
| <div className="timer-timeout"> | |
| ⏰ Time's up! | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |