59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { isAuthenticated, setAuthenticated } from "@/lib/auth"
|
|
|
|
export function Header() {
|
|
const [authed, setAuthed] = useState(false)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
setAuthed(isAuthenticated())
|
|
}, [])
|
|
|
|
function handleLogout() {
|
|
setAuthenticated(false)
|
|
setAuthed(false)
|
|
router.push("/")
|
|
}
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<img
|
|
src="/images/logo.jpg"
|
|
alt="Higgy's Android Boxes"
|
|
width={180}
|
|
height={60}
|
|
className="h-10 w-auto"
|
|
/>
|
|
</Link>
|
|
<nav className="flex items-center gap-2">
|
|
<Button variant="ghost" asChild>
|
|
<Link href="/videos">Videos</Link>
|
|
</Button>
|
|
{authed ? (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handleLogout}
|
|
>
|
|
Log Out
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
asChild
|
|
className="bg-[#8BC34A] hover:bg-[#7CB342] text-white"
|
|
>
|
|
<Link href="/login">Client Login</Link>
|
|
</Button>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|