Files
diplom-frontend/app/components/custom-ui/settings-button.tsx
2025-05-21 08:52:33 +03:00

49 lines
1.4 KiB
TypeScript

import { Settings } from "lucide-react";
import { useNavigate } from "react-router";
import { ModalType, useModalStore } from "~/stores/modal-store";
import { useTokenStore } from "~/stores/token-store";
import { Button } from "../ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
export function SettingsButton() {
const setToken = useTokenStore((state) => state.setToken);
const onOpen = useModalStore((state) => state.onOpen);
const navigate = useNavigate();
const onUpdateProfile = () => {
onOpen(ModalType.UPDATE_PROFILE);
};
const onOpenSettings = () => {
navigate("/app/settings");
};
const onLogout = () => {
setToken(undefined);
window.location.reload();
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Settings className="size-5 m-1.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={onOpenSettings}>Settings</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onClick={onLogout}>
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}