bagas
2d78f719ff
All checks were successful
Docker Build and Push / build-and-push (push) Successful in 7m15s
110 lines
4.7 KiB
TypeScript
110 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import TunnlLogo from "./tunnl-logo"
|
|
import UserMenu from "./user-menu"
|
|
import { useEffect, useState } from "react"
|
|
import { authClient } from "@/lib/auth-client";
|
|
import { redirect, RedirectType } from 'next/navigation'
|
|
|
|
export default function SiteHeader() {
|
|
type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
|
|
const [logedin, setLogedin] = useState<SessionData | null>(null)
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const result = await authClient.getSession()
|
|
if (result.data != null) {
|
|
setLogedin(result.data.user);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const logout = async () => {
|
|
await authClient.signOut({
|
|
fetchOptions: {
|
|
onSuccess: () => {
|
|
redirect('/login', RedirectType.replace)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
return (
|
|
<header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm">
|
|
<div className="max-w-7xl mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<TunnlLogo />
|
|
<span className="text-xl font-bold">
|
|
<span className="text-emerald-400">tunnl</span>.live
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{logedin ? (
|
|
<UserMenu
|
|
user={{
|
|
name: logedin.name ?? "User",
|
|
email: logedin.email ?? "",
|
|
image: logedin.image ?? undefined,
|
|
}}
|
|
onSignOut={logout}
|
|
/>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
|
|
<polyline points="10 17 15 12 10 7" />
|
|
<line x1="15" x2="3" y1="12" y2="12" />
|
|
</svg>
|
|
Sign In
|
|
</Link>
|
|
|
|
<div className="hidden md:flex items-center gap-2 text-sm text-gray-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-emerald-400"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 16v-4" />
|
|
<path d="M12 8h.01" />
|
|
</svg>
|
|
<span>Sign in to save configurations & view history</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|