info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-25 08:35:42 +02:00
Code Issues Releases Wiki Activity

chore: account dropdown

Browse Source
This commit is contained in:
Arik Chakma
2023-03-31 01:31:03 +06:00
parent da9c897765
commit cbb322b66f
2 changed files with 59 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Login/account-dropdown.tsx Normal file
View File

@@ -0,0 +1,56 @@
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME } from '../../lib/utils';
import { useEffect, useState } from 'preact/hooks';
export default function AccountDropdown() {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
// If dropdown is open, close it.
const handleOpen = () => {
if (isOpen) setIsOpen(false);
};
document.addEventListener('click', handleOpen);
return () => document.removeEventListener('click', handleOpen);
}, [isOpen]);
return (
<div className="relative">
<button
className="flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
onClick={() => setIsOpen((p) => !p)}
>
<span className="mr-2">Account</span>
</button>
<div
className={`absolute right-0 mt-2 w-48 rounded-md bg-slate-800 py-1 shadow-xl ${
isOpen ? 'block' : 'hidden'
}`}
>
<ul>
<li className="px-1">
<a
href="/profile"
className="block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
>
Your Profile
</a>
</li>
<li className="px-1">
<button
className="block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
onClick={() => {
Cookies.remove(TOKEN_COOKIE_NAME);
window.location.reload();
}}
>
Logout
</button>
</li>
</ul>
</div>
</div>
);
}

13
src/components/Login/account-nav.tsx
View File

@@ -1,6 +1,7 @@
import Cookies from 'js-cookie';
import { useAuth } from '../../hooks/use-auth';
import { TOKEN_COOKIE_NAME } from '../../lib/utils';
import AccountDropdown from './account-dropdown';
export default function AccountNavigation() {
const { user, isLoading } = useAuth();
@@ -16,21 +17,13 @@ export default function AccountNavigation() {
) : (
<>
{user ? (
<button
className="flex h-10 w-32 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
onClick={() => {
Cookies.remove(TOKEN_COOKIE_NAME);
window.location.reload();
}}
>
<span className="mr-2">Logout</span>
</button>
<AccountDropdown />
) : (
<a
className="flex h-10 w-32 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600"
href="/signup"
>
<span className="mr-2">Login</span>
<span className="mr-2">Register</span>
</a>
)}
</>