44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface Props {
|
|
testName: string
|
|
timeLeft: number // seconds remaining; -1 = no limit (count-up mode)
|
|
timeUsed: number // seconds elapsed (used when no limit)
|
|
onSubmit: () => void
|
|
}
|
|
|
|
function formatTime(s: number): string {
|
|
const h = Math.floor(s / 3600)
|
|
const m = Math.floor((s % 3600) / 60)
|
|
const sec = s % 60
|
|
if (h > 0) return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
|
|
return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
|
|
}
|
|
|
|
export function TestSessionHeader({ testName, timeLeft, timeUsed, onSubmit }: Props) {
|
|
const isUnlimited = timeLeft === -1
|
|
const displaySeconds = isUnlimited ? timeUsed : timeLeft
|
|
const isUrgent = !isUnlimited && timeLeft < 300 // last 5 min
|
|
|
|
return (
|
|
<header className="h-14 flex items-center justify-between px-5 bg-white border-b border-slate-200 shadow-sm flex-shrink-0 z-10">
|
|
<span className="font-bold text-slate-800 text-sm truncate max-w-xs">{testName}</span>
|
|
|
|
<span className={cn(
|
|
'text-2xl font-extrabold tabular-nums',
|
|
isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600',
|
|
)}>
|
|
{isUnlimited ? <span className="text-slate-400 text-base">∞</span> : formatTime(displaySeconds)}
|
|
</span>
|
|
|
|
<button
|
|
onClick={onSubmit}
|
|
className="flex items-center gap-1.5 px-4 py-2 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors"
|
|
>
|
|
<span className="material-symbols-outlined" style={{ fontSize: 16 }}>send</span>
|
|
Nộp bài
|
|
</button>
|
|
</header>
|
|
)
|
|
}
|