web_next/scheduler_app/app/(routes)/dashboard/_components/dashboardHeader.js

34 lines
No EOL
1.3 KiB
JavaScript

"use client"
import { LogoutLink, useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { BsThreeDotsVertical } from "react-icons/bs";
import Image from 'next/image';
import React from 'react'
import {DropdownMenu, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
import { DropdownMenuContent } from '@radix-ui/react-dropdown-menu';
const DashboardHeader = () => {
const {user} = useKindeBrowserClient();
return user && (
<div className='p-5 sm:p-10'>
<div>
<DropdownMenu>
<DropdownMenuTrigger className='flex items-center float-right outline-none '>
<Image src={user?.picture} alt='user-img' width={30} height={30} className='rounded-full'/>
<BsThreeDotsVertical/>
</DropdownMenuTrigger>
<DropdownMenuContent className='border border-gray-200 mt-1 bg-white'>
<DropdownMenuLabel>{user.given_name}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Setting</DropdownMenuItem>
<DropdownMenuItem><LogoutLink>Logout</LogoutLink></DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
)
}
export default DashboardHeader