57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
|
import React from "react";
|
|||
|
|
import Button from "../../components/Button/Button";
|
|||
|
|
import { Grid } from "../../components/Grid/Grid";
|
|||
|
|
import { motion } from "framer-motion";
|
|||
|
|
import { useUserStore } from "../../context/zustand-store/userStore";
|
|||
|
|
import {
|
|||
|
|
useModalStore,
|
|||
|
|
useTabStore,
|
|||
|
|
} from "../../context/zustand-store/appStore";
|
|||
|
|
import { useNavigate } from "@tanstack/react-router";
|
|||
|
|
|
|||
|
|
export const Logout = (): React.ReactElement => {
|
|||
|
|
const { logOut } = useUserStore();
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const { clearTabState } = useTabStore();
|
|||
|
|
|
|||
|
|
const { closeModal } = useModalStore();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Grid
|
|||
|
|
container
|
|||
|
|
xs="full"
|
|||
|
|
column
|
|||
|
|
className="flex justify-center items-center"
|
|||
|
|
>
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 20 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ duration: 0.3 }}
|
|||
|
|
className="w-full max-w-md p-6"
|
|||
|
|
>
|
|||
|
|
<Grid container className="flex-row space-y-0 space-x-4">
|
|||
|
|
<Button
|
|||
|
|
onClick={() => {
|
|||
|
|
clearTabState();
|
|||
|
|
logOut?.();
|
|||
|
|
navigate({ to: "/" });
|
|||
|
|
closeModal();
|
|||
|
|
}}
|
|||
|
|
fullWidth
|
|||
|
|
className="bg-[#eb5757] hover:bg-[#d44e4e] text-white py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
|
|||
|
|
>
|
|||
|
|
بله
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
onClick={() => closeModal()}
|
|||
|
|
fullWidth
|
|||
|
|
className="bg-gray-200 text-gray-700 hover:bg-gray-100 py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
|
|||
|
|
>
|
|||
|
|
خیر
|
|||
|
|
</Button>
|
|||
|
|
</Grid>
|
|||
|
|
</motion.div>
|
|||
|
|
</Grid>
|
|||
|
|
);
|
|||
|
|
};
|