Spaces:
Running
Running
File size: 2,199 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import { useRef, useState } from "react";
import classNames from "classnames";
import { useClickAway } from "react-use";
import { useUser } from "utils/auth";
import { FormattedMessage } from "react-intl";
export const UserMenu = ({ children }: any) => {
const { logout, user } = useUser();
const [open, setOpen] = useState(false);
const ref = useRef(null);
useClickAway(ref, () => setOpen(false));
return (
<div ref={ref} className="relative">
<div className="cursor-pointer" onClick={() => setOpen(!open)}>
{children}
</div>
<div
className={classNames(
"absolute bottom-0 right-0 transform translate-y-full max-w-[200px] pt-4 w-[200px] transition-all duration-100",
{
"opacity-0 pointer-events-none translate-y-3/4": !open,
"translate-y-full": open,
}
)}
>
<div className="bg-dark-500 rounded-lg w-full shadow-lg">
<div className="px-4 pt-4 pb-3 text-white font-title font-bold text-sm">
{user.username}#{user.discriminator}
</div>
<div className="px-2 pb-4">
<div
className="flex items-center justify-start gap-3 bg-[#f02727] text-white group transition-all duration-100 p-2 rounded-md cursor-pointer"
onClick={() => logout()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-6 h-6 text-white transition-all duration-100"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
/>
</svg>
<p className="font-semibold tracking-wider text-sm">
<FormattedMessage id="navigation.menus.logOut" />
</p>
</div>
</div>
</div>
</div>
</div>
);
};
|