refactor: organized components based on domain

src/partials/Auth/Logout.tsx

@@ -0,0 +1,56 @@
+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>
+  );
+};