66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { LaptopIcon, PersonIcon } from "@radix-ui/react-icons";
|
|
import { DropdownMenu, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
|
|
import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
|
|
import { useAtomValue } from "jotai";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { userAtom } from "../../../../AtomStore/AtomStore";
|
|
import LoginButton from "./LoginButton/LoginButton";
|
|
import LogoutButton from "./LogoutButton/LogoutButton";
|
|
|
|
export default function UserButton() {
|
|
const user = useAtomValue(userAtom);
|
|
const { t } = useTranslation();
|
|
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="">
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<Tooltip content={"User menu"} className="w-fit">
|
|
<IconButton
|
|
size={"2"}
|
|
className="items-center my-auto rounded-full"
|
|
variant="ghost"
|
|
>
|
|
<PersonIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</DropdownMenu.Trigger>
|
|
|
|
<DropdownMenu.Content className="w-fit">
|
|
<DropdownMenu.Item onClick={() => navigate("/profile")}>
|
|
<div>
|
|
<Flex className="justify-between w-full gap-2">
|
|
<Icon>
|
|
<PersonIcon />
|
|
</Icon>
|
|
|
|
<Text>{t("profile")}</Text>
|
|
</Flex>
|
|
</div>
|
|
</DropdownMenu.Item>
|
|
|
|
<DropdownMenu.Item onClick={() => navigate("/user/blogs")}>
|
|
<div>
|
|
<Flex className="justify-between gap-2">
|
|
<Icon>
|
|
<LaptopIcon />
|
|
</Icon>
|
|
<Text>{t("yourBlogs")}</Text>
|
|
</Flex>
|
|
</div>
|
|
</DropdownMenu.Item>
|
|
|
|
<DropdownMenu.Separator />
|
|
|
|
<DropdownMenu.Item color={user ? "red" : "green"}>
|
|
{user ? <LogoutButton /> : <LoginButton />}
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</div>
|
|
);
|
|
}
|