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>
|
||
);
|
||
};
|