58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
import { useAuth } from '~/hooks/use-auth'
|
|
import { MenuButton, MenuItem as HeadlessMenuItem } from '@headlessui/react'
|
|
import {
|
|
ChevronDownIcon,
|
|
AdjustmentsHorizontalIcon,
|
|
ArrowRightStartOnRectangleIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import { BookOpenIcon } from '@heroicons/react/24/outline'
|
|
import { Menu, MenuItem, MenuItems, MenuSeparator } from '~/components/menu'
|
|
import clsx from 'clsx'
|
|
import { Link } from 'react-router'
|
|
|
|
export function UserMenu({ className }) {
|
|
const { authUser } = useAuth()
|
|
|
|
return (
|
|
<Menu as="div" className={clsx('relative', className)}>
|
|
<MenuButton className="flex gap-0.5 items-center cursor-pointer">
|
|
<div className="w-10 h-10 bg-zinc-200 dark:bg-gray-800 rounded-full overflow-hidden">
|
|
{/* <Avatar
|
|
name={authUser.name}
|
|
email={authUser.email}
|
|
size={40}
|
|
maxInitials={2}
|
|
/> */}
|
|
</div>
|
|
<ChevronDownIcon className="w-5 fill-gray-500 dark:fill-white" />
|
|
</MenuButton>
|
|
|
|
<MenuItems className="w-64 mt-1">
|
|
{/* User */}
|
|
<HeadlessMenuItem as="div" className="py-2 px-4">
|
|
<div className="font-semibold truncate">{authUser?.name}</div>
|
|
<div className="text-sm text-gray-600 dark:text-slate-300 truncate">
|
|
{authUser?.email}
|
|
</div>
|
|
</HeadlessMenuItem>
|
|
|
|
<MenuSeparator />
|
|
|
|
<MenuItem as={Link} target="_blank" to="/redirect-out">
|
|
<BookOpenIcon className="w-5" /> Sala de aula
|
|
</MenuItem>
|
|
|
|
<MenuSeparator />
|
|
|
|
<MenuItem as={Link} to="/settings">
|
|
<AdjustmentsHorizontalIcon className="w-5" /> Configurações
|
|
</MenuItem>
|
|
|
|
<MenuItem as={Link} to="/auth/logout">
|
|
<ArrowRightStartOnRectangleIcon className="w-5" /> Sair
|
|
</MenuItem>
|
|
</MenuItems>
|
|
</Menu>
|
|
)
|
|
}
|