92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuPortal,
|
|
DropdownMenuSubContent
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Link } from 'react-router-dom'
|
|
import userAuthStore from '@/hooks/userAuth'
|
|
import { Button } from './ui/button'
|
|
import Logo from '@/assets/vite.svg'
|
|
|
|
const DropdownMenuUser: React.FC = () => {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<div className="flex rounded-full cursor-pointer focus:ring-4 focus:ring-gray-300 text-sm">
|
|
<img
|
|
className="w-10 h-10 rounded-full"
|
|
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
|
alt="user photo"
|
|
/>
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 me-4">
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>Profile</DropdownMenuItem>
|
|
<DropdownMenuItem>Billing</DropdownMenuItem>
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
<DropdownMenuItem>Keyboard shortcuts</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>Email</DropdownMenuItem>
|
|
<DropdownMenuItem>Message</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>More...</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem>New Team</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
|
<DropdownMenuItem>Support</DropdownMenuItem>
|
|
<DropdownMenuItem disabled>API</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>Log out</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
const Navbar: React.FC = () => {
|
|
const userInfo = userAuthStore(state => state.userInfo)
|
|
|
|
return (
|
|
<nav className="flex justify-center items-center fixed top-0 z-50 w-full py-5 bg-zinc-700">
|
|
<div className="flex justify-between items-center mx-auto w-full max-w-screen-2xl px-6 xs:px-8 sm:px-16">
|
|
<Link to="/">
|
|
<img src={Logo} alt="logo" width={40} height={40} />
|
|
</Link>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center ms-3">
|
|
{userInfo ? (
|
|
<DropdownMenuUser />
|
|
) : (
|
|
<Button asChild variant={'outline'}>
|
|
<Link to={'/login?redirect_to=' + window.location.pathname}>Login</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|