Initialized repository for project AI scoring application

Co-authored-by: 吳佩庭 <190080258+WuPeiTing0919@users.noreply.github.com>
2025-09-21 15:28:35 +00:00
commit 22a5727920
38 changed files with 6515 additions and 0 deletions
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { FileText, Upload, Settings, BarChart3, Home, Menu, X } from "lucide-react"
+
+const navigation = [
+  { name: "首頁", href: "/", icon: Home },
+  { name: "上傳文件", href: "/upload", icon: Upload },
+  { name: "評分標準", href: "/criteria", icon: Settings },
+  { name: "評分結果", href: "/results", icon: BarChart3 },
+  { name: "歷史記錄", href: "/history", icon: FileText },
+]
+
+export function Sidebar() {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+
+  return (
+    <>
+      {/* Mobile menu button */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="fixed top-4 left-4 z-50 md:hidden"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+      </Button>
+
+      {/* Sidebar */}
+      <div
+        className={cn(
+          "fixed inset-y-0 left-0 z-40 w-64 bg-sidebar border-r border-sidebar-border transform transition-transform duration-200 ease-in-out md:translate-x-0",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="flex flex-col h-full">
+          {/* Logo */}
+          <div className="flex items-center px-6 py-8">
+            <div className="flex items-center space-x-3">
+              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                <BarChart3 className="w-5 h-5 text-primary-foreground" />
+              </div>
+              <h1 className="text-xl font-bold text-sidebar-foreground font-[var(--font-playfair)]">AI 評審系統</h1>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 px-4 space-y-2">
+            {navigation.map((item) => {
+              const isActive = pathname === item.href
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className={cn(
+                    "flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors",
+                    isActive
+                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                      : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+                  )}
+                  onClick={() => setIsOpen(false)}
+                >
+                  <item.icon className="mr-3 h-5 w-5" />
+                  {item.name}
+                </Link>
+              )
+            })}
+          </nav>
+
+          {/* Footer */}
+          <div className="p-4">
+            <Card className="p-4 bg-sidebar-primary">
+              <div className="text-sm text-sidebar-primary-foreground">
+                <p className="font-medium mb-1">需要幫助？</p>
+                <p className="text-xs opacity-80">查看使用說明或聯繫技術支援</p>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+
+      {/* Overlay for mobile */}
+      {isOpen && (
+        <div className="fixed inset-0 z-30 bg-black bg-opacity-50 md:hidden" onClick={() => setIsOpen(false)} />
+      )}
+    </>
+  )
+}