first

frontend/src/components/Layout.tsx

@@ -0,0 +1,71 @@
+import { Outlet, NavLink } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useAuthStore } from '@/store/authStore'
+import { apiClient } from '@/services/api'
+
+export default function Layout() {
+  const { t } = useTranslation()
+  const logout = useAuthStore((state) => state.logout)
+
+  const handleLogout = () => {
+    apiClient.logout()
+    logout()
+  }
+
+  const navLinks = [
+    { to: '/upload', label: t('nav.upload') },
+    { to: '/processing', label: t('nav.processing') },
+    { to: '/results', label: t('nav.results') },
+    { to: '/export', label: t('nav.export') },
+    { to: '/settings', label: t('nav.settings') },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b bg-card">
+        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">{t('app.title')}</h1>
+            <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="px-4 py-2 text-sm font-medium text-foreground hover:text-primary transition-colors"
+          >
+            {t('nav.logout')}
+          </button>
+        </div>
+      </header>
+
+      {/* Navigation */}
+      <nav className="border-b bg-card">
+        <div className="container mx-auto px-4">
+          <ul className="flex space-x-1">
+            {navLinks.map((link) => (
+              <li key={link.to}>
+                <NavLink
+                  to={link.to}
+                  className={({ isActive }) =>
+                    `block px-4 py-3 text-sm font-medium transition-colors ${
+                      isActive
+                        ? 'text-primary border-b-2 border-primary'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`
+                  }
+                >
+                  {link.label}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-4 py-8">
+        <Outlet />
+      </main>
+    </div>
+  )
+}