81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
"use client"
|
|
import { loginRepository } from "@/lib/login/data/repository"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
|
|
import { useMutation } from "@tanstack/react-query"
|
|
import QueryWrapper from "../query-wrapper"
|
|
import { useRouter } from "next/navigation"
|
|
import logo_2 from "@/images/Telkomcel.png"
|
|
import ava from "@/images/ava.png"
|
|
import Image from "next/image"
|
|
import { useEffect, useState } from "react"
|
|
|
|
interface Props {
|
|
useLogo: boolean
|
|
}
|
|
|
|
const Content = ({
|
|
useLogo
|
|
}: Props) => {
|
|
const [username, setUserName] = useState("");
|
|
const router = useRouter()
|
|
const mutation = useMutation({
|
|
mutationFn: () => loginRepository.logout(),
|
|
onSuccess: () => {
|
|
router.push("/onboard/login")
|
|
},
|
|
onError: () => {
|
|
console.log('error')
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
fetch("/api/cookies")
|
|
.then((res) => res.json())
|
|
.then((data) => setUserName(data.credential.username));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex justify-between items-center py-5 px-10 bg-white relative w-full">
|
|
{useLogo ? <div className="flex gap-2">
|
|
<div className="max-w-60">
|
|
<Image src={logo_2} alt="logo_2" priority={false}/>
|
|
</div>
|
|
</div> : <div/>}
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<div className="flex items-center gap-2 cursor-pointer">
|
|
<div className="text-end">
|
|
<h4 className="text-black-80 text-base">Welcome,</h4>
|
|
<h4 className="text-black-100 uppercase">{username}</h4>
|
|
</div>
|
|
<Image src={ava} alt="ava" className="cursor-pointer" />
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 bg-white mr-8 shadow-md rounded-md transition-transform data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut text-black-70 hover:text-black-50">
|
|
<DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
|
|
<button className="w-full flex justify-start">
|
|
Profile
|
|
</button>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="hover:bg-gray-300 border-none outline-none px-2">
|
|
<button className="w-full flex justify-start" onClick={() => mutation.mutate()}>
|
|
Logout
|
|
</button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const AppBar = ({useLogo = true}: {useLogo: boolean}) => {
|
|
return (
|
|
<QueryWrapper>
|
|
<Content useLogo={useLogo}/>
|
|
</QueryWrapper>
|
|
)
|
|
}
|
|
|
|
export default AppBar |