update flash card, test

src/features/toeic/components/TestSessionHeader.tsx

@@ -0,0 +1,43 @@
+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>
+  )
+}