71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import {
|
|
EnterIcon,
|
|
ExitIcon,
|
|
LaptopIcon,
|
|
PersonIcon,
|
|
} from "@radix-ui/react-icons";
|
|
import { DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes";
|
|
import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
|
|
import { useAtomValue } from "jotai";
|
|
import { userAtom } from "../../../AtomStore/AtomStore";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function UserButton() {
|
|
const user = useAtomValue(userAtom);
|
|
|
|
return (
|
|
<div className="flex justify-end flex-1">
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<IconButton>
|
|
<PersonIcon />
|
|
</IconButton>
|
|
</DropdownMenu.Trigger>
|
|
|
|
<DropdownMenu.Content className="w-fit">
|
|
<DropdownMenu.Item>
|
|
<Link to={"/profile"}>
|
|
<Flex className="justify-between gap-2">
|
|
<Icon>
|
|
<PersonIcon />
|
|
</Icon>
|
|
|
|
<Text>Profile</Text>
|
|
</Flex>
|
|
</Link>
|
|
</DropdownMenu.Item>
|
|
|
|
<DropdownMenu.Item>
|
|
<Flex className="justify-between gap-2">
|
|
<Icon>
|
|
<LaptopIcon />
|
|
</Icon>
|
|
<Text>Your blogs</Text>
|
|
</Flex>
|
|
</DropdownMenu.Item>
|
|
|
|
<DropdownMenu.Separator />
|
|
|
|
<DropdownMenu.Item color={user ? "red" : "green"}>
|
|
{user ? (
|
|
<Flex className="justify-between gap-2">
|
|
<Icon>
|
|
<ExitIcon />
|
|
</Icon>
|
|
<Text>Log out</Text>
|
|
</Flex>
|
|
) : (
|
|
<Flex className="justify-between gap-2">
|
|
<Icon>
|
|
<EnterIcon />
|
|
</Icon>
|
|
<Text>Log in</Text>
|
|
</Flex>
|
|
)}
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</div>
|
|
);
|
|
}
|