99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { useSession } from "./SessionProvider"
|
|
import { authClient } from "@/lib/auth-client"
|
|
import { useEffect, useState } from "react"
|
|
|
|
export default function Navigation() {
|
|
const { session, loading } = useSession()
|
|
const [userRole, setUserRole] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
// Fetch user role from database if session exists
|
|
if (session?.user?.id) {
|
|
fetch(`/api/users/${session.user.id}/role`)
|
|
.then(res => res.json())
|
|
.then(data => setUserRole(data.role))
|
|
.catch(() => setUserRole(null));
|
|
}
|
|
}, [session]);
|
|
|
|
const handleLogout = async () => {
|
|
await authClient.signOut()
|
|
window.location.href = '/auth/login'
|
|
}
|
|
|
|
return (
|
|
<nav className="bg-white shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between h-16">
|
|
<div className="flex items-center">
|
|
<Link href="/" className="text-xl font-bold text-gray-900">
|
|
EuchreCamp
|
|
</Link>
|
|
<div className="hidden md:ml-6 md:flex md:space-x-8">
|
|
<Link
|
|
href="/rankings"
|
|
className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
|
>
|
|
Rankings
|
|
</Link>
|
|
{session && (
|
|
<>
|
|
<Link
|
|
href="/admin/tournaments"
|
|
className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
|
>
|
|
Tournaments
|
|
</Link>
|
|
{userRole === "club_admin" && (
|
|
<Link
|
|
href="/admin"
|
|
className="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
|
|
>
|
|
Admin
|
|
</Link>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
{loading ? (
|
|
<div className="text-gray-500">Loading...</div>
|
|
) : session ? (
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-gray-700 text-sm font-medium">
|
|
{session.user?.name || session.user?.email}
|
|
</span>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="text-gray-500 hover:text-gray-700 text-sm font-medium"
|
|
>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
href="/auth/login"
|
|
className="text-gray-500 hover:text-gray-700 text-sm font-medium"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
<Link
|
|
href="/auth/register"
|
|
className="bg-green-600 text-white px-3 py-1 rounded-md text-sm font-medium hover:bg-green-700"
|
|
>
|
|
Sign up
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|