Initial commit

components/test-layout.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { ArrowLeft, Clock } from "lucide-react"
+import Link from "next/link"
+import type { ReactNode } from "react"
+
+interface TestLayoutProps {
+  children: ReactNode
+  title: string
+  currentQuestion: number
+  totalQuestions: number
+  timeRemaining?: string
+  onBack?: () => void
+}
+
+export function TestLayout({
+  children,
+  title,
+  currentQuestion,
+  totalQuestions,
+  timeRemaining,
+  onBack,
+}: TestLayoutProps) {
+  const progress = (currentQuestion / totalQuestions) * 100
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
+        <div className="container mx-auto px-4 py-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3 min-w-0 flex-1">
+              <Button variant="ghost" size="sm" onClick={onBack} asChild={!onBack} className="flex-shrink-0">
+                {onBack ? (
+                  <>
+                    <ArrowLeft className="w-4 h-4 mr-1" />
+                    <span className="hidden sm:inline">返回</span>
+                  </>
+                ) : (
+                  <Link href="/">
+                    <ArrowLeft className="w-4 h-4 mr-1" />
+                    <span className="hidden sm:inline">返回</span>
+                  </Link>
+                )}
+              </Button>
+              <div className="min-w-0 flex-1">
+                <h1 className="text-base sm:text-lg font-semibold text-foreground truncate">{title}</h1>
+                <p className="text-xs sm:text-sm text-muted-foreground">
+                  第 {currentQuestion} 題 / 共 {totalQuestions} 題
+                </p>
+              </div>
+            </div>
+            {timeRemaining && (
+              <div className="flex items-center gap-1 text-xs sm:text-sm text-muted-foreground flex-shrink-0">
+                <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+                <span>{timeRemaining}</span>
+              </div>
+            )}
+          </div>
+          <div className="mt-3">
+            <Progress value={progress} className="h-2" />
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-4 py-6">{children}</main>
+    </div>
+  )
+}