Initial commit

resources/js/Header.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import {MouseEvent} from 'react'
+import {Link} from 'react-router-dom'
+import axios from 'axios'
+import ThemeSwitch from '@/components/ThemeSwitch'
+import { useTranslation } from 'react-i18next';
+import LanguageSwitcher from '@/components/LanguageSwitcher';
+import { useUserStore } from '@/stores/userStore'
+
+
+
+// https://reactrouter.com/start/declarative/navigating
+
+export default function Header() {
+  const { t } = useTranslation('common')
+  const user = useUserStore((s) => s.user);
+  const clearUser = useUserStore((s) => s.clearUser);
+  const isAuthenticated = Boolean(user);
+  const isAdmin = Boolean(user?.is_admin);
+
+  const handleLogout = async (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    try {
+      await axios.post(
+        '/logout',
+        {},
+        {
+          withCredentials: true,
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+        },
+      )
+      clearUser()
+      window.location.href = '/'
+    } catch (error) {
+      console.error(t("logout_failed"), error)
+    }
+  }
+
+  return (
+    <header className="border-b border-gray-200 px-4 py-2 shadow-sm">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between">
+        <span className="text-xl font-semibold">VKV</span>
+        <div className="flex gap-4 text-sm font-medium">
+          <Link to="/contests">
+            {t("contests_link")}
+          </Link>
+          {isAdmin && (
+            <>
+                <Link to="/admin/contests">
+                {t("admin_contests_link")}
+                </Link>
+                <Link to="/admin/news">
+                {t("admin_news_link")}
+                </Link>
+                <Link to="/admin/evaluation-rule-sets">
+                {t("admin_rulesets_link")}
+                </Link>
+                <Link to="/admin/users">
+                {t("admin_users_link") ?? "Uživatelé"}
+                </Link>
+            </>
+          )}
+          {isAuthenticated ? (
+            <Link to="/logout" onClick={handleLogout}>
+              {t("logout_link")}
+            </Link>
+          ) : (
+            <Link to="/login">
+                {t("login_link")}
+            </Link>
+          )}
+          <LanguageSwitcher />
+          <ThemeSwitch />
+        </div>
+      </nav>
+    </header>
+  )
+}