73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import { User } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
|
import apiService from "@/services/apiService"
|
|
import { useState } from "react"
|
|
import LogoutDialog from "../admin/migrant/Modal/LogoutDialog"
|
|
interface HeaderProps {
|
|
title: string
|
|
}
|
|
|
|
export default function Header({ title }: HeaderProps) {
|
|
const [logoutDialogOpen, setLogoutDialogOpen] = useState(false)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
setIsSubmitting(true)
|
|
await apiService.logout()
|
|
alert("Logged out successfully")
|
|
setTimeout(() => {
|
|
window.location.href = "/login"
|
|
}, 1000) // Delay so the alert shows
|
|
} catch (err) {
|
|
alert("Logout failed. Please try again.")
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
setLogoutDialogOpen(false)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
|
|
<header className="h-16 border-b border-gray-800 bg-gray-900 flex items-center justify-between px-6 shadow-lg relative">
|
|
<div className="h-1 bg-gradient-to-r from-[#9B2335] to-[#9B2335]/60 absolute top-0 left-0 w-full"></div>
|
|
<h2 className="text-xl font-medium text-white">{title}</h2>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="rounded-full text-gray-300 hover:text-white hover:bg-gray-800"
|
|
>
|
|
<User className="size-5" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="bg-gray-800 border-gray-700">
|
|
<DropdownMenuItem className="text-gray-300 hover:text-white hover:bg-gray-700 focus:bg-gray-700 focus:text-white">
|
|
Profile
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="text-gray-300 hover:text-white hover:bg-gray-700 focus:bg-gray-700 focus:text-white">
|
|
Settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setLogoutDialogOpen(true)} className="text-red-400 hover:text-red-300 hover:bg-red-900/20 focus:bg-red-900/20 focus:text-red-300">
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<LogoutDialog
|
|
open={logoutDialogOpen}
|
|
onOpenChange={setLogoutDialogOpen}
|
|
onConfirm={handleLogout}
|
|
isSubmitting={isSubmitting}
|
|
/>
|
|
</header>
|
|
)
|
|
}
|